PHP, MySQL ® & JavaScript ® ALL-IN-ONE by Richard Blum

PHP, MySQL ® & JavaScript ® All-in-One For Dummies ® Published by: John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030-5774, www.wiley.com Copyright © 2018 by John Wiley & Sons, Inc., Hoboken, New Jersey Published simultaneously in Canada No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permitted under Sections 107 or 108 of the 1976 United States Copyright Act, without the prior written permission of the Publisher. Requests to the Publisher for permission should be addressed to the Permissions Department, John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030, (201) 748-6011, fax (201) 748-6008, or online at http://www.wiley.com/go/ permissions. Trademarks: Wiley, For Dummies, the Dummies Man logo, Dummies.com, Making Everything Easier, and related trade dress are trademarks or registered trademarks of John Wiley & Sons, Inc. and may not be used without written permission. MySQL is a registered trademark of MySQL AB. JavaScript is a registered trademark of Oracle America, Inc. All other trademarks are the property of their respective owners. John Wiley & Sons, Inc. is not associated with any product or vendor mentioned in this book. LIMIT OF LIABILITY/DISCLAIMER OF WARRANTY: THE PUBLISHER AND THE AUTHOR MAKE NO REPRESENTATIONS OR WARRANTIES WITH RESPECT TO THE ACCURACY OR COMPLETENESS OF THE CONTENTS OF THIS WORK AND SPECIFICALLY DISCLAIM ALL WARRANTIES, INCLUDING WITHOUT LIMITATION WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE. NO WARRANTY MAY BE CREATED OR EXTENDED BY SALES OR PROMOTIONAL MATERIALS. THE ADVICE AND STRATEGIES CONTAINED HEREIN MAY NOT BE SUITABLE FOR EVERY SITUATION. THIS WORK IS SOLD WITH THE UNDERSTANDING THAT THE PUBLISHER IS NOT ENGAGED IN RENDERING LEGAL, ACCOUNTING, OR OTHER PROFESSIONAL SERVICES. IF PROFESSIONAL ASSISTANCE IS REQUIRED, THE SERVICES OF A COMPETENT PROFESSIONAL PERSON SHOULD BE SOUGHT. NEITHER THE PUBLISHER NOR THE AUTHOR SHALL BE LIABLE FOR DAMAGES ARISING HEREFROM. THE FACT THAT AN ORGANIZATION OR WEBSITE IS REFERRED TO IN THIS WORK AS A CITATION AND/OR A POTENTIAL SOURCE OF FURTHER INFORMATION DOES NOT MEAN THAT THE AUTHOR OR THE PUBLISHER ENDORSES THE INFORMATION THE ORGANIZATION OR WEBSITE MAY PROVIDE OR RECOMMENDATIONS IT MAY MAKE. FURTHER, READERS SHOULD BE AWARE THAT INTERNET WEBSITES LISTED IN THIS WORK MAY HAVE CHANGED OR DISAPPEARED BETWEEN WHEN THIS WORK WAS WRITTEN AND WHEN IT IS READ. For general information on our other products and services, please contact our Customer Care Department within the U.S. at 877-762-2974, outside the U.S. at 317-572-3993, or fax 317-572-4002. For technical support, please visit https://hub.wiley.com/community/support/dummies. Wiley publishes in a variety of print and electronic formats and by print-on-demand. Some material included with standard print versions of this book may not be included in e-books or in print-on-demand. If this book refers to media such as a CD or DVD that is not included in the version you purchased, you may download this material at http://booksupport.wiley.com. For more information about Wiley products, visit www.wiley.com. Library of Congress Control Number: 2018933793 ISBN 978-1-119-46838-7 (pbk); ISBN 978-1-119-46833-2 (ebk); ISBN 978-1-119-46837-0 (ebk) Manufactured in the United States of America 10 9 8 7 6 5 4 3 2 1

Contents at a Glance Introduction 1 Book 1: Getting Started with Web Programming 5 CHAPTER 1: Examining the Pieces of Web Programming 7 CHAPTER 2: Using a Web Server                                             27 CHAPTER 3: Building a Development Environment                             51 Book 2: HTML5 and CSS3                                         71 CHAPTER 1: The Basics of HTML5                                            73 CHAPTER 2: The Basics of CSS3                                             103 CHAPTER 3: HTML5 Forms                                                 135 CHAPTER 4: Advanced CSS3                                                157 CHAPTER 5: HTML5 and Multimedia                                         177 Book 3: JavaScript                                                195 CHAPTER 1: Introducing JavaScript                                          197 CHAPTER 2: Advanced JavaScript Coding                                     223 CHAPTER 3: Using jQuery                                                  243 CHAPTER 4: Reacting to Events with JavaScript and jQuery                     263 CHAPTER 5: Troubleshooting JavaScript Programs                            283 Book 4: PHP                                                        301 CHAPTER 1: Understanding PHP Basics                                      303 CHAPTER 2: PHP Flow Control                                              325 CHAPTER 3: PHP Libraries                                                  349 CHAPTER 4: Considering PHP Security                                       375 CHAPTER 5: Object-Oriented PHP Programming                              395 CHAPTER 6: Sessions and Carts                                             419 Book 5: MySQL                                                    443 CHAPTER 1: Introducing MySQL                                            445 CHAPTER 2: Administering MySQL                                          465 CHAPTER 3: Designing and Building a Database                              489 CHAPTER 4: Using the Database                                            513 CHAPTER 5: Communicating with the Database from PHP Scripts               541

Book 6: Creating Object-Oriented Programs                561 CHAPTER 1: Designing an Object-Oriented Application                        563 CHAPTER 2: Implementing an Object-Oriented Application                     593 CHAPTER 3: Using AJAX                                                    619 CHAPTER 4: Extending WordPress                                          651 Book 7: Using PHP Frameworks                                681 CHAPTER 1: The MVC Method                                              683 CHAPTER 2: Selecting a Framework                                         695 CHAPTER 3: Creating an Application Using Frameworks                       715 Index                                                                735

Table of Contents INTRODUCTION 1 About This Book1 Foolish Assumptions 2 Icons Used in This Book 3 Beyond the Book 3 Where to Go from Here 3 BOOK 1: GETTING STARTED WITH WEB PROGRAMMING 5 CHAPTER 1: Examining the Pieces of Web Programming 7 Creating a Simple Web Page 7 Kicking things off with the World Wide Web 8 Making sense of markup languages 9 Retrieving HTML documents                                 10 Styling 14 Creating a Dynamic Web Page                                  17 Client-side programming                                    19 Server-side programming                                   21 Combining client-side and server-side programming            24 Storing Content 25 CHAPTER 2: Using a Web Server                                       27 Recognizing What’s Required                                   27 The web server28 The PHP server29 The database server 30 Considering Your Server Options                                31 Using a web-hosting company                               32 Building your own server environment                        33 Using premade servers                                     37 Tweaking the Servers 41 Customizing the Apache Server                              41 Customizing the MySQL server                               44 Customizing the PHP server                                 46 CHAPTER 3: Building a Development Environment               51 Knowing Which Tools to Avoid                                  51 Graphical desktop tools                                     52 Web-hosting sites 52 Word processors 53 Table of Contents v

vi PHP, MySQL & JavaScript All-in-One For Dummies Working with the Right Tools                                    53 Text editors53 Program editors                                            61 Integrated development environments                        64 Browser debuggers 67 BOOK 2: HTML5 AND CSS3                                      71 CHAPTER 1: The Basics of HTML5                                     73 Diving into Document Structure                                 73 Elements, tags, and attributes                                73 Document type 75 Page definition 76 Page sections                                             78 Looking at the Basic HTML5 Elements                            81 Headings  81 Text groupings 82 Breaks 84 Marking Your Text 85 Formatting text 85 Using hypertext 86 Working with Characters                                       90 Character sets 90 Special characters 91 Making a List (And Checking It Twice)                             92 Unordered lists 92 Ordered lists93 Description lists 95 Building Tables96 Defining a table 96 Defining the table’s rows and columns                        97 Defining the table headings                                  99 CHAPTER 2: The Basics of CSS3                                       103 Understanding Styles                                        103 Defining the rules of CSS3                                 104 Applying style rules                                       110 Cascading style rules                                     111 Styling Text                                                 112 Setting the font                                          112 Playing with color                                        116 Working with the Box Model                                  119 Styling Tables                                               121 Table borders                                            122 Table data                                               123

Positioning Elements                                        125 Putting elements in a specific place                         128 Floating elements                                        130 CHAPTER 3: HTML5 Forms                                             135 Understanding HTML5 Forms                                 135 Defining a form                                          136 Working with form fields                                  137 Using Input Fields                                           138 Text boxes                                              138 Password entry                                          140 Check boxes                                             141 Radio buttons                                            142 Hidden fields                                            143 File upload                                              144 Buttons                                                 145 Adding a Text Area                                          146 Using Drop-Down Lists                                       147 Enhancing HTML5 Forms                                     149 Data lists                                                149 Additional input fields                                     150 Using HTML5 Data Validation                                 154 Holding your place                                       154 Making certain data required                              155 Validating data types                                     155 CHAPTER 4: Advanced CSS3                                           157 Rounding Your Corners                                      157 Using Border Images                                        159 Looking at the CSS3 Colors                                   162 Playing with Color Gradients                                  164 Linear gradients                                          164 Radial gradients                                          165 Adding Shadows                                            166 Text shadows                                            166 Box shadows                                            167 Creating Fonts                                              168 Focusing on font files                                     169 Working with web fonts                                   169 Handling Media Queries                                      171 Using the @media command                              171 Dealing with CSS3 media queries                           172 Applying multiple style sheets                              175 Table of Contents vii

viii PHP, MySQL & JavaScript All-in-One For Dummies CHAPTER 5: HTML5 and Multimedia                                177 Working with Images                                        177 Placing images                                           178 Styling images                                           179 Linking images                                           181 Working with image maps                                 182 Using HTML5 image additions                              183 Playing Audio                                               185 Embedded audio                                         185 Digital audio formats                                     186 Audio the HTML5 way                                     188 Watching Videos                                            190 Paying attention to video quality                           190 Looking at digital video formats                            191 Putting videos in your web page                            192 Getting Help from Streamers                                 194 BOOK 3: JAVASCRIPT                                            195 CHAPTER 1: Introducing JavaScript                                  197 Knowing Why You Should Use JavaScript                       197 Changing web page content                               198 Changing web page styles                                 198 Seeing Where to Put Your JavaScript Code                      199 Embedding JavaScript                                     199 Using external JavaScript files                              203 The Basics of JavaScript                                      203 Working with data                                        204 Data types                                              205 Arrays of data                                            206 Operators                                               207 Controlling Program Flow                                    209 Conditional statements                                   209 Loops                                                   216 Working with Functions                                      220 Creating a function                                       221 Using a function                                          222 CHAPTER 2: Advanced JavaScript Coding                           223 Understanding the Document Object Model                    223 The Document Object Model tree                          224 JavaScript and the Document Object Model                  226

Finding Your Elements                                       233 Getting to the point                                       233 Walking the tree                                         235 Working with Document Object Model Form Data               238 Text boxes                                              238 Text areas                                               239 Check boxes                                             240 Radio buttons                                            241 CHAPTER 3: Using jQuery                                              243 Loading the jQuery Library                                   244 Option 1: Downloading the library file to your server          245 Option 2: Using a content delivery network                  246 Using jQuery Functions                                      246 Finding Elements                                            247 Replacing Data                                              250 Working with text                                        250 Working with HTML                                       252 Working with attributes                                   253 Working with form values                                 253 Changing Styles                                             254 Playing with properties                                    254 Using CSS objects                                        256 Using CSS classes                                        257 Changing the Document Object Model                         259 Adding a node                                           259 Removing a node                                         260 Playing with Animation                                       261 CHAPTER 4: Reacting to Events with JavaScript and jQuery    263 Understanding Events                                       263 Event-driven programming                                264 Watching the mouse                                      264 Listening for keystrokes                                   265 Paying attention to the page itself                          266 Focusing on JavaScript and Events                             267 Saying hello and goodbye                                 267 Listening for mouse events                                269 Listening for keystrokes                                   273 Event listeners                                           275 Looking at jQuery and Events                                 276 jQuery event functions                                    276 The jQuery event handler                                 280 Table of Contents ix

x PHP, MySQL & JavaScript All-in-One For Dummies CHAPTER 5: Troubleshooting JavaScript Programs               283 Identifying Errors                                            283 Working with Browser Developer Tools                         285 The DOM Explorer                                        286 The Console                                             287 The Debugger                                           290 Working Around Errors                                      295 BOOK 4: PHP                                                      301 CHAPTER 1: Understanding PHP Basics                             303 Seeing the Benefits of PHP                                   303 A centralized programming language                       304 Centralized data management                             304 Understanding How to Use PHP                               305 Embedding PHP code                                     305 Identifying PHP pages                                     306 Displaying output                                        307 Handling new-line characters                              309 Working with PHP Variables                                  310 Declaring variables                                       311 Seeing which data types PHP supports                      312 Grouping data values with array variables                   315 Using PHP Operators                                        317 Arithmetic operators                                      317 Arithmetic shortcuts                                      318 Boolean operators                                       319 String operators                                          320 Including Files                                              320 The include() function                                     320 The require() function                                     323 CHAPTER 2: PHP Flow Control                                        325 Using Logic Control                                          325 The if statement                                          326 The else statement                                       328 The elseif statement                                      328 The switch statement                                     330 Looping                                                    331 The while family                                          331 The for statement                                        333 The foreach statement                                    334 Building Your Own Functions                                 336 Working with Event-Driven PHP                               339

Working with links                                        339 Processing form data                                     343 CHAPTER 3: PHP Libraries                                             349 How PHP Uses Libraries                                      349 Exploring PHP extensions                                 350 Examining the PHP extensions                             351 Including extensions                                      353 Adding additional extensions                              354 Text Functions                                              354 Altering string values                                     354 Splitting strings                                          356 Testing string values                                      359 Searching strings                                         360 Math Functions                                             361 Number theory                                          361 Calculating logs and exponents                            362 Working the angles                                       363 Hyperbolic functions                                      364 Tracking statistics                                        364 Date and Time Functions                                     365 Generating dates                                         365 Using timestamps                                        367 Calculating dates                                         368 Image-Handling Functions                                    369 CHAPTER 4: Considering PHP Security                              375 Exploring PHP Vulnerabilities                                 375 Cross-site scripting                                       376 Data spoofing                                            379 Invalid data                                              380 Unauthorized file access                                  382 PHP Vulnerability Solutions                                   384 Sanitizing data                                           384 Validating data                                           389 CHAPTER 5: Object-Oriented PHP Programming                  395 Understanding the Basics of Object-Oriented Programming       395 Defining a class                                          396 Creating an object instance                                397 Using Magic Class Methods                                   401 Defining mutator magic methods                           401 Defining accessor magic methods                          403 The constructor                                          406 Table of Contents xi

xii PHP, MySQL & JavaScript All-in-One For Dummies The destructor                                           407 Copying objects                                          408 Displaying objects                                        408 Loading Classes                                             409 Extending Classes                                           414 CHAPTER 6: Sessions and Carts                                      419 Storing Persistent Data                                       419 The purpose of HTTP cookies                              420 Types of cookies                                         421 The anatomy of a cookie                                  422 Cookie rules                                             424 PHP and Cookies                                            424 Setting cookies                                           424 Reading cookies                                          426 Modifying and deleting cookies                            428 PHP and Sessions                                           430 Starting a session                                        431 Storing and retrieving session data                         431 Removing session data                                    435 Shopping Carts                                             436 Creating a cart                                           436 Placing items in the cart                                   437 Retrieving items from a cart                               437 Removing items from a cart                               438 Putting it all together                                     438 BOOK 5: MYSQL                                                  443 CHAPTER 1: Introducing MySQL                                      445 Seeing the Purpose of a Database                             445 How databases work                                     446 Relational databases                                      449 Database data types                                      451 Data constraints                                         451 Structured Query Language                                452 Presenting MySQL                                           454 MySQL features                                          454 Storage engines                                          456 Data permissions                                         457 Advanced MySQL Features                                   458 Handling transactions                                     458 Making sure your database is ACID compliant                459 Examining the views                                      461

Working with stored procedures                           462 Pulling triggers                                           463 Working with blobs                                       463 CHAPTER 2: Administering MySQL                                  465 MySQL Administration Tools                                  465 Working from the command line                           466 Using MySQL Workbench                                  470 Using the phpMyAdmin tool                               475 Managing User Accounts                                     477 Creating a user account                                   477 Managing user privileges                                  481 CHAPTER 3: Designing and Building a Database                  489 Managing Your Data                                         489 The first normal form                                     490 The second normal form                                  491 The third normal form                                    491 Creating Databases                                          492 Using the MySQL command line                            492 Using MySQL Workbench                                  495 Using phpMyAdmin                                      497 Building Tables                                             500 Working with tables using the command-line interface        500 Working with tables using Workbench                      505 Working with tables in phpMyAdmin                        508 CHAPTER 4: Using the Database                                     513 Working with Data                                           513 The MySQL command-line interface                        514 The MySQL Workbench tool                               519 The phpMyAdmin tool                                    522 Searching for Data                                          524 The basic SELECT format                                  525 More advanced queries                                   527 Playing It Safe with Data                                      531 Performing data backups                                  532 Restoring your data                                      538 CHAPTER 5: Communicating with the Database from PHP Scripts                                                     541 Database Support in PHP                                     541 Using the mysqli Library                                      543 Connecting to the database                                544 Closing the connection                                    545 Table of Contents xiii

xiv PHP, MySQL & JavaScript All-in-One For Dummies Submitting queries                                       546 Retrieving data                                           547 Being prepared                                          549 Checking for errors                                       551 Miscellaneous functions                                   553 Putting It All Together                                        554 BOOK 6: CREATING OBJECT-ORIENTED PROGRAMS       561 CHAPTER 1: Designing an Object-Oriented Application         563 Determining Application Requirements                        563 Creating the Application Database                             565 Designing the database                                   565 Creating the database                                    568 Designing the Application Objects                             571 Designing objects                                        571 Coding the objects in PHP                                 573 Designing the Application Layout                              579 Designing web page layout                                580 The AuctionHelper page layout                             581 Coding the Website Layout                                   582 Creating the web page template                            582 Creating the support files                                 587 CHAPTER 2: Implementing an Object-Oriented Application    593 Working with Events                                         593 Bidder Object Events                                        595 Listing bidders                                           595 Adding a new bidder                                      603 Searching for a bidder                                    605 Item Object Events                                          605 Listing items                                             606 Adding a new item                                       611 Searching for an item                                     614 Logging Out of a Web Application                             614 Testing Web Applications                                     616 CHAPTER 3: Using AJAX                                                619 Getting to Know AJAX                                        619 Communicating Using JavaScript                              621 Considering XMLHttpRequest class methods                 622 Focusing on XMLHttpRequest class properties               623 Trying out AJAX                                          625

Using the jQuery AJAX Library                                 629 The jQuery $.ajax() function                                629 The jQuery $.get() function                                633 Transferring Data in AJAX                                     635 Looking at the XML standard                               635 Using XML in PHP                                        636 Using XML in JavaScript                                   640 Modifying the AuctionHelper Application                       643 CHAPTER 4: Extending WordPress                                   651 Getting Acquainted with WordPress                           651 What WordPress can do for you                            652 How to run WordPress                                    653 Parts of a WordPress website                              654 Installing WordPress                                         655 Downloading the WordPress software                      655 Creating the database objects                              656 Configuring WordPress                                   658 Examining the Dashboard                                    662 Using WordPress                                            664 Exploring the World of Plugins                                669 WordPress APIs                                          670 Working with plugins and widgets                          671 Creating Your Own Widget                                   674 Coding the widget                                        674 Activating the widget plugin                               676 Adding the widget                                        677 BOOK 7: USING PHP FRAMEWORKS                          681 CHAPTER 1: The MVC Method                                        683 Getting Acquainted with MVC                                 683 Exploring the MVC method                                684 Digging into the MVC components                          686 Communicating in MVC                                   690 Comparing MVC to Other Web Models                         691 The MVP method                                         692 The MVVM method                                       692 Seeing How MVC Fits into N-Tier Theory                        693 Implementing MVC                                          694 Table of Contents xv

xvi PHP, MySQL & JavaScript All-in-One For Dummies CHAPTER 2: Selecting a Framework                                 695 Getting to Know PHP Frameworks                             695 Convention over configuration                             696 Scaffolding                                              698 Routing                                                 699 Helper methods                                          700 Form validation                                          700 Support for mobile devices                                700 Templates                                               701 Unit testing                                              701 Knowing Why You Should Use a Framework                    702 Focusing on Popular PHP Frameworks                         704 CakePHP                                                704 CodeIgniter                                              705 Laravel                                                  707 Symfony                                                708 Zend Framework                                         709 Looking At Micro Frameworks                                 710 Lumen                                                  710 Slim                                                    711 Yii                                                      713 CHAPTER 3: Creating an Application Using Frameworks        715 Building the Template                                       715 Initializing the application                                 716 Exploring the files and folders                              718 Defining the database environment                         719 Creating an Application Scaffold                               721 Installing the scaffolding                                  721 Exploring the scaffolding code                             724 Modifying the Application Scaffold                             725 Adding a new feature link                                 726 Creating the controller code                               728 Modifying the model code                                 730 Painting a view                                           731 INDEX                                                            735

Introduction 1 Introduction T he Internet has become an amazing place to shop, do your banking, look up homework assignments, and even keep track of your bowling league scores. Behind all those great applications are a bunch of different web technolo- gies that must all work together to create the web experience you come to expect. You may think that creating web applications is best left for the professionals, but you’d be surprised by just how well you can do with just a little knowledge and experience! That’s the point of this book. About This Book Think of this book as a reference book. Like the dictionary or an encyclopedia (remember those?), you don’t have to read it from beginning to end. Instead, you can dip into the book to find the information you need and return to it again when you need more. That said, you won’t be disappointed if you work through the book from beginning to end, and you may find it easier to follow along with some of the examples. In this book, I walk you through all the different technologies involved with creat- ing dynamic web applications that can track data and present it in an orderly and pleasing manner. I cover several key topics that you’ll need to know to create a full-featured, dynamic web application: » Creating the basic layout of a web page: In this book, you see the program code behind placing content on a web page and reacting to your website visitors’ mouse clicks. » Styling the web page: Just placing data on a web page is boring. In this book, you learn how to use CSS to help use color, images, and placement to help liven up your web applications. » Adding dynamic features: These days, having a static web page that just sits there doesn’t get you many followers. This book shows you how to incorpo- rate JavaScript to animate your web pages and provide dynamic features.

» Leveraging the power of the server: The PHP programming language allows you to harness the power behind the web server to dynamically generate web pages “on the fly” as your website visitors make choices. » Storing data for the future: Just about every dynamic web application needs to store data, and in this book you learn exactly how to do that using the MySQL server, which is commonly available in just about every web platform. » Creating full applications: Many books throw a bunch of technology at you and expect you to put the pieces together yourself. This book not only shows you the technology, but also demonstrates how all the parts fit together to create a dynamic web application. » Using helper programs: No one is an island; everyone needs some help putting together those fancy web applications. There are plenty of tools to help you get the job done, and with this book you find out which tools will help you with which features of your application. Throughout this book you see sidebars (text in gray boxes) and material marked with the Technical Stuff icon. All of these things are skippable. If you have time and are interested, by all means read them, but if you don’t or aren’t, don’t. Finally, within this book, you may note that some web addresses break across two lines of text. If you’re reading this book in print and want to visit one of these web pages, simply key in the web address exactly as it’s noted in the text, pretending as though the line break doesn’t exist. If you’re reading this as an e-book, you’ve got it easy — just click the web address to be taken directly to the web page. Foolish Assumptions You don’t need any level of programming experience to enjoy this book and start creating your own web applications. Each chapter walks through all the basics you need to know and doesn’t assume you’ve ever coded before. As long as you’re rea- sonably comfortable navigating your way around a standard desktop computer, you have all the experience you need! That said, if you’ve already tried your hand at web programming and you just want to fill in a few holes, this book will work well for you, too! This book doesn’t expect you to run out and buy any expensive software packages to start your web development career. All the tools that are used in the book are freely available open-source software. I walk you through how to set up a com- plete development environment, whether you’re working in Microsoft Windows, Apple macOS, or Linux. 2 PHP, MySQL & JavaScript All-in-One For Dummies

Icons Used in This Book I use some icons throughout the book to help you identify useful information. Here’s what the icons are and what I use them for: Anything marked with the Tip icon provides some additional information about a topic to help you better understand what’s going on behind the scenes or how to better use the feature discussed in the text. You don’t have to commit this book to memory — there won’t be a test. But every once in a while I tell you something so important that you should remember it. When I do, I mark it with the Remember icon. The Warning icon is there to point out potential pitfalls that can cause problems. If you want to save yourself a lot of time or trouble, heed these warnings. When you see the Technical Stuff icon, be prepared to put your geek hat on. When I get into the weeds, I use the Technical Stuff icon. If you’re not interested in these details, feel free to skip these sections — you won’t miss anything essential about the topic at hand. Beyond the Book In addition to the material in the print or e-book you’re reading right now, you also get access to a free online Cheat Sheet filled with more tips and tricks on building a web application, including accessing any database from your PHP pro- grams, filtering data your program receives from web forms to block unwanted or potentially dangerous data, quickly finding data in a MySQL database, and triggering JavaScript events at predetermined times in a browser. To access this resource go to www.dummies.com and enter PHP, MySQL & JavaScript All-in-One For Dummies Cheat Sheet in the search box. Where to Go from Here This book doesn’t have to be read from beginning to end, so you can dive in wher- ever you want! Use the Table of Contents and Index to find subjects that inter- est you. If you already know PHP and JavaScript and you’re just interested in learning how to create a dynamic web application from scratch, start out with Introduction 3

Book 6, Chapter 1. If you’re interested in learning how to use one of the framework packages available for PHP, check out Book 7, Chapter 1. Or, if you’re interested in everything, start with Book 1, Chapter 1, and read until the very end. With the information in this book, you’ll be ready to start creating your own dynamic web applications. Web programming is one of those skills that takes time and practice to get good at, so the more coding you can do, the better you’ll get at it. To get some practice, you may want to offer your services for free at first, to build up a reputation. Find a needy nonprofit organization that you’re interested in supporting and offer to work on its website. They’ll get a great website, and you’ll get a project to add to your résumé! Don’t stop learning! There are always new things coming out in the web world, even if you just stick to using the same software packages to develop your web applications. Stay plugged in to the PHP world by visiting the official PHP website at www.php.net or by visiting (and even participating in) one or more of the many PHP forums. Just do some Googling to find them. Enjoy your newfound skills in developing dynamic web applications! 4 PHP, MySQL & JavaScript All-in-One For Dummies

1 Getting Started with Web Programming

Contents at a Glance CHAPTER 1: Examining the Pieces of Web Programming 7 Creating a Simple Web Page                                  7 Creating a Dynamic Web Page                               17 Storing Content                                            25 CHAPTER 2: Using a Web Server                                   27 Recognizing What’s Required                                27 Considering Your Server Options                             31 Tweaking the Servers                                       41 CHAPTER 3: Building a Development Environment            51 Knowing Which Tools to Avoid                               51 Working with the Right Tools                                 53

CHAPTER 1 Examining the Pieces of Web Programming 7 Examining the Pieces of Web Programming A t first, diving into web programming can be somewhat overwhelming. You need to know all kinds of things in order to build a web application that not only looks enticing but also works correctly. The trick to learning web programming is to pull the individual pieces apart and tackle them one at a time. This chapter gets you started on your web design journey by examining the dif- ferent pieces involved in creating a simple web page. Then it kicks things up a notch and walks you through dynamic web pages. And finally, the chapter ends by explaining how to store your content for use on the web. Creating a Simple Web Page Before you can run a marathon, you need to learn how to walk. Likewise, before you can create a fancy website, you need to know the basics of how web pages work. Nowadays, sharing documents on the Internet is easy, but it wasn’t always that way. Back in the early days of the Internet, documents were often created using proprietary word-processing packages and had to be downloaded using the cum- bersome File Transfer Protocol (FTP). To retrieve a document, you had to know Chapter 1 IN THIS CHAPTER » Understanding how simple web pages work » Incorporating programming into your web page » Storing content in a database

8 BOOK 1 Getting Started with Web Programming exactly what server contained the document, you had to know where it was stored on the server, and you had to be able to log into the server. After all that, you still needed to have the correct word-processing software on your computer to view the document. As you can imagine, it wasn’t long before a new way of sharing content was required. To get to where we are today, several different technologies had to be developed: » A method for linking related documents together » A way for the document reader to display formatted text the same way in any type of device » An Internet standard allowing clients to easily retrieve documents from any server » A standard method of styling and positioning content in documents This section describes the technology that made viewing documents on the Inter- net work the way it does today. Kicking things off with the World Wide Web In 1989, Tim Berners-Lee developed a method of interconnecting documents to make sharing research information on the Internet easier. His creation, the World Wide Web, defined a method for linking documents together in a web structure, so that a researcher could follow the path between related documents, no mat- ter where they were located in the world. Clicking text in one document took you to another document automatically, without your having to manually find and download the related document. The method Berners-Lee developed for linking documents is called hypertext. Hyper- text embeds links that are hidden from view in the document, and directs the soft- ware being used to view the document (known as the web browser) to retrieve the referenced document. With hypertext, you just click the link, and the software (the web browser) does all the work of finding and retrieving the related document for you. Because the document-viewing software does all the hard work, a new type of software had to be developed that was more than just a document viewer. That’s where web browsers came into existence. Web browsers display a document on a computer screen and respond to the reader clicking hypertext links to retrieve other specified documents. To implement hypertext in documents, Berners-Lee had to utilize a text-based document-formatting system. Fortunately for him, a lot of work had already been done on that.

Examining the Pieces of Web Programming CHAPTER 1 Examining the Pieces of Web Programming 9 Making sense of markup languages Markup languages were developed to replace proprietary word-processing pack- ages with a standard way of formatting documents so that they could be read by any type of document viewer on any type of device. This goal is accomplished by embedding tags in the text. Each tag indicates a formatting feature, such as head- ings, bold or italic text, or special margins. What made markup languages differ- ent from word-processing packages is that these tags were common text codes instead of proprietary codes, making it generic enough that any device could read and process them. The first popular markup language was the Generalized Markup Language (GML), developed by IBM in the 1960s. The International Organization for Standardization (ISO) took up the challenge of creating markup languages and produced the Stan- dard Generalized Markup Language (SGML), mainly based on GML, in the 1980s. However, because SGML was developed to cover all types of document formatting on all types of devices, it’s extremely complex and it wasn’t readily adapted. Berners-Lee used the ideas developed in SGML to create a simplified markup lan- guage that could support his hypertext idea. He called it Hypertext Markup Language (HTML). HTML uses the same concept of tags that SGML uses, but it defines fewer of them, making it easier to implement in software. An example of an HTML tag is <h1>. You use this tag to define text that’s used as a page heading. Just surround the text with an opening <h1> tag, and a correspond- ing closing </h1> tag, like this: <h1>This is my heading</h1> When the browser gets to the <h1> tag, it knows to format the text embedded in the opening and closing tags using a different style of formatting, such as a larger font or a bold typeface. To define a hypertext link to another document, you use the <a> tag: <a href="anotherdoc.html">Click here for more info</a> When the reader clicks the Click here for more info text, the browser automatically tries to retrieve the document specified in the <a> tag. That document can be on the same server or on another server anywhere on the Internet. HTML development has seen quite a few changes since Berners-Lee created it and turned it over to the World Wide Web Consortium (W3C) to maintain. Table 1-1 shows the path the language has taken.

10 BOOK 1 Getting Started with Web Programming The HTML version 4.01 standard was the backbone of websites for many years, and it’s still used by many websites today. However, HTML version 5.0 (called HTML5 for short) is the future of web development. It provides additional features for embedding multimedia content in web pages without the need for proprietary software plug-ins (such as Adobe Flash Player). Because multimedia is taking over the world (just ask YouTube), HTML5 has grown in popularity. This book focuses on HTML5; all the code included in this book use that standard. Retrieving HTML documents Besides a document-formatting standard, Berners-Lee also developed a method of easily retrieving the HTML documents in a client–server environment. A web server software package runs in the background on a server, listening for con- nection requests from web clients (the browser). The browser sends requests to retrieve HTML documents from the server. The request can be sent anonymously (without using a login username), or the browser can send a username and pass- word or certificate to identify the requestor. These requests and responses are defined in the Hypertext Transfer Protocol (HTTP) standard. HTTP defines a set of requests the client can send to the server and a set of responses the server uses to reply back to the client. This section walks you through the basics of how web servers and web clients use HTTP to interact with each other to move web pages across the Internet. Web clients The web client sends requests to the web server on a standard network commu- nication channel (known as TCP port 80), which is defined as the standard for TABLE 1-1 HTML Versions Version Description HTML 1.0 Formally released in 1989 as the first public version of HTML HTML 2.0 Released in 1995 to add interactive elements HTML 3.0 Released in 1996 but never widely adopted HTML 3.2 Released in 1997, adding support for tables HTML 4.01 Released in 1999, widely adopted, and remains an often-used standard XHTML 1.0 Released in 2001, standardizing HTML around the XML document format XHTML 1.1 Released in 2002, making updates and corrections to XHTML 1.1 HTML 5.0 Released in 2014, adding multimedia features

Examining the Pieces of Web Programming CHAPTER 1 Examining the Pieces of Web Programming 11 HTTP communication. HTTP uses standard text requests sent to the server, either requesting information from the server or sending information to the server. Table 1-2 shows the basic HTTP client requests available. As shown in Table 1-2, when you ask to view a web page from your client browser, the browser sends the HTTP GET request to the server, specifying the filename of the web page. The server then responds with a response code along with the requested data. If the client doesn’t specify a filename in the GET request, most servers have a default file with which to respond. Web servers With HTTP, the web server must respond to each client request received. If the client sends a request that the server can’t process, the server must send some type of error code back to the client indicating that something went wrong. The first part of the server response is a status code and text that the client uses to determine whether the submitted request was successful. The format of the HTTP response uses a three-digit status code, followed by an optional text message that the browser can display. The three-digit codes are broken down into five categories: » 1xx: Informational messages » 2xx: Success » 3xx: Redirection TABLE 1-2 HTTP Client Requests Request Description CONNECT Converts the connection into a secure tunnel for sending data DELETE Deletes the specified resource GET Requests the specified resource HEAD Requests the title of the specified resource OPTIONS Retrieves the HTTP requests that the server supports PATCH Applies a modification to a resource POST Sends specified data to the server for processing PUT Stores specified data at a specified location TRACE Sends the received request back to the client

12 BOOK 1 Getting Started with Web Programming » 4xx: Client error » 5xx: Server error The three-digit status code is crucial to knowing what happened with the response. Many status codes are defined in the HTTP standards, providing some basic infor- mation on the status of client requests. Table 1-3 shows just a few of the standard HTTP response codes that you may run into. TABLE 1-3 Common HTTP Server Response Status Codes Status Code Text Message Description 100 Continue The client should send additional information. 101 Switching Protocols The server is using a different protocol for the request. 102 Processing The server is working on the response. 200 OK The server accepted the request and has returned the response. 201 Created The server created a new resource in response to the request. 202 Accepted The data sent by the client has been accepted by the server but has not completed processing the data. 206 Partial Content The response returned by the server is only part of the full data; more will come in another response. 300 Multiple Choices The request matched multiple possible responses from the server. 301 Moved Permanently The requested file was moved and is no longer at the requested location. 302 Found The requested resource was found at a different location. 303 See Other The requested resource is available at a different location. 304 Not Modified The requested resource was not modified since the last time the client accessed it. 307 Temporary Redirect The requested resource was temporarily moved to a different location. 308 Permanent Redirect The requested resource was permanently moved to a different location. 400 Bad Request The server cannot process the request. 401 Unauthorized The resource requires authentication that the client did not provide.

Examining the Pieces of Web Programming CHAPTER 1 Examining the Pieces of Web Programming 13 As you can see from Table 1-3, a web server can return many possible responses. It’s the client’s job to parse the response and determine the next action to take. If the response indicates the request was successful, the server will follow the response code with the data related to the request, such as the contents of an HTML file. The client must then read the returned data and decide what to do with it. For HTML files, the browser will display the requested file, applying the HTML formatting tags to the data. Don’t worry about trying to memorize all the HTTP status codes. Most of them you’ll never run into in your web-programming career. Before long, you’ll start to remember a few of the more common ones, and you can always look up any others you run into. Status Code Text Message Description 402 Payment Required The requested resource is not freely available. 403 Forbidden The resource requires authentication, and the client does not have the proper permission. 404 Not Found The requested resource was not located on the server. 414 URI Too Long The Uniform Resource Identifier (URI) describing the location of the resource was longer than the server is able to handle. 415 Unsupported Media Type The server does not know how to process the requested resource file. 429 Too Many Requests The client has sent too many requests within a specific amount of time. 500 Internal Server Error An unexpected condition occurred on the server while trying to retrieve the requested resource. 501 Not Implemented The server doesn’t recognize the request. 502 Bad Gateway The server was acting as a proxy to another server but received an invalid response from the other server. 503 Service Unavailable The server is currently unavailable, often due to maintenance. 505 HTTP Version Not Supported The server doesn’t support the HTTP standard used by the client in the request. 507 Insufficient Storage The server is unable to store the resource due to lack of storage space. 511 Network Authentication Required The client is required to authenticate with a network resource to receive the response.

14 BOOK 1 Getting Started with Web Programming Styling The HTML standard defines how browsers perform basic formatting of text, but it doesn’t really provide a way to tell a browser how to display the text. The <h1> tag indicates that the text should be a heading, but nothing tells the browser just how to display the heading to make it different from any other text on the page. This is where styling comes into play. Styling allows you to tell the browser just what fonts, sizes, and colors to use for text, as well as how to position the text in the display. This section explains how styling affects how your web pages appear to your visitors. Style sheets There are several ways to define styling for an HTML document. The most basic method is what the browser uses by default. When the browser sees an HTML formatting tag, such as the <h1> tag, it has a predefined font, size, and color that the developer of the browser felt was useful. That’s fine, but what if you want to make some headings black and others red? This is possible with inline styling. Inline styling allows you to define special styles that apply to only one specific tag in the document. For example, to make one heading red, you’d use the following HTML: <h1 style="color: red">Warning, this is bad</h1> The style term is called an attribute of the <h1> tag. There are a few different attributes you can apply directly to tags within HTML; each one modifies how the browser should handle the tag. The style attribute allows you to apply any type of styling to this specific <h1> tag in the document. In this example, I chose to change the color of the text. Now, you’re probably thinking that I’ve just opened another can of worms. What if you want to apply the red color to all the <h1> tags in your document? That’s a lot of extra code to write! Don’t worry, there’s a solution for that. Instead of inserting styles inline, you can create a style definition that applies to the entire document. This method is known as internal styling. It defines a set of styles at the top of the HTML document that are applied to the entire document. Internal styling looks like this: <style> h1 {color: red;} </style>

Examining the Pieces of Web Programming CHAPTER 1 Examining the Pieces of Web Programming 15 Now the browser will display all the <h1> tags in the document using a red color. But wait, there’s more! Style listings can be somewhat lengthy for large web pages, and placing them at the top of a document can become cumbersome. Also, if you want to apply the same styles to all the web pages in a website, having to retype or copy all that text can be tiring. To solve that problem, you use an external style sheet. An external style sheet allows you to define styles just as the internal method does, but in a separate file, called a style sheet. Any web page can reference the same style sheet, and you can apply multiple style sheets to a single web page. You ref- erence the external style sheet using the <link> tag, like this: <link rel="stylesheet" href="mystyles.css"> When the browser sees this tag, it downloads the external style sheet, and applies the styles you defined in it to the document. This all sounds great, but things just got a lot more complicated! Now there are three different locations from which you can define styles for your HTML doc- ument, on top of what the browser itself does. How are you supposed to know which ones take precedence over the others? The Cascading Style Sheet (CSS) standard defines a set of rules that determine just how browsers should apply styles to an HTML document. As the name implies, styles cascade down from a high level to a low level. Styles defined in a higher- level rule override styles defined in a lower-level rule. The CSS standard defines nine separate levels, which I cover in greater detail in Book 2, Chapter 2, but for now, here are the four most common style levels, in order from highest priority to lowest: » Styles defined within the element tags » Styles defined in an internal style sheet » Styles defined in an external style sheet » Styles defined by the client’s browser defaults So, any style attributes you set in an element tag override any styles that you set in an internal style sheet, which overrides any styles you set in an external style sheet, which overrides any styles the client browser uses by default. This allows you to set an overall style for your web pages using an external style sheet, and then override those settings for individual situations using the standard element tags.

16 BOOK 1 Getting Started with Web Programming You may be wondering how assistive technology tools work to change the web page display for individuals who are sight impaired. Part of the nine rules that I cover in Book 2, Chapter 2, incorporate any rules defined in the browser for sight- impaired viewing. CSS standards The CSS standard defines a core set of styles for basic rendering of an HTML document. The first version of CSS (called CSS1) was released in 1996, and it only defined some very rudimentary styles: » Font type, size, and color » Text alignment (such as margins) » Background colors or images » Borders The second version of CSS, called — you guessed it! — CSS2, was released in 1998. It added only a few more styling features: » More-exact positioning of text » Styles for different output types (such as printers or screens) » The appearance of browser features such as the cursor and scrollbar That’s still not all that impressive of a list of styles. Needless to say, more was needed to help liven up web pages. To compensate for that, many browser devel- opers started creating their own style definitions, apart from the CSS standards. These style definitions are called extensions. The browser extensions covered lots of different fancy styling features, such as applying rounded edges to borders and images, making a smoother layout in the web page. As you might guess, having different extensions to apply different style features in different browsers just made things more complicated. Instead of coding a single style for an element in an HTML document, you needed to code the same feature several different ways so the web page would look the same in different browsers. This quickly became a nightmare. When work was started on the CSS3 standard in 1999, one of the topics was to rein in the myriad browser extensions. However, things quickly became compli- cated because all the different browser developers wanted their own extensions included in the new standard.

Examining the Pieces of Web Programming CHAPTER 1 Examining the Pieces of Web Programming 17 To simplify the process, the CSS design committee split the CSS standards into separate modules. Each CSS module covers a specific area of styling, such as col- ors, media support, and backgrounds. Each module could be voted on and released under a different timeline. The downside to this approach is that now each mod- ule has been released as a recommended standard at a different time, making the CSS3 standard somewhat difficult to track and implement. Quite possibly one of the most anticipated features of CSS3 is the ability to define fonts. Fonts have long been the bane of web programmers. When you define a specific font, that font must be installed on your website visitor’s computer in order for the browser to use it. If the font isn’t available, the browser picks a default font to use, which often becomes an ugly mess. Web fonts allow you to define a font on your server so that every client browser can download the font and render text using it. This is a huge accomplishment! No longer are you reliant on your website visitors having specific fonts installed in their web browsers. Yet another popular feature of CSS3 is the use of shadows and semitransparent colors in text and other web page elements, such as form objects. These features by themselves can transform an ugly HTML form into a masterpiece. The combination of HTML5 and CSS3 has greatly revolutionized the web world, allowing developers to create some pretty amazing websites. However, one thing was still missing: the ability to easily change content on the web page. Creating a Dynamic Web Page Static web pages contain information that doesn’t change until the web designer or programmer manually changes it. In the early days of the Internet, simply jumping on the Internet bandwagon was important for corporations. It wasn’t so important what companies posted on the web, as long as they had an Internet presence where customers could get basic information about the company and its products. Static web pages, consisting solely of HTML and CSS, easily accom- plished this function. But one of the big limitations of static web pages is how much effort it takes to update them. Changing a single element on a static web page requires rebuild- ing and reloading the entire page, or sometimes even a group of web pages. This process is way too cumbersome for an organization that frequently needs to post real-time information, such as events, awards, or closings. Also, during this pro- cess, a developer can accidentally change other items on the page, seriously mess- ing up the information on the web page, or even the entire web page layout!

18 BOOK 1 Getting Started with Web Programming Dynamic web pages allow you to easily change your content in real time without even touching the coding of the page. That’s right: Without manually making any changes to the page itself, the information on the page can change. This means you can keep the content on the page fresh so that what a visitor sees there now may be updated or replaced in a day, an hour, or a minute. The core layout of the web page can remain the same, but the data presented constantly changes. To successfully create a dynamic web page, you have to know a method for auto- matically inserting real-time data into the HTML code that gets sent to the client browser. This is where web scripting languages come in. A web scripting language allows you to insert program code inside your web page that dynamically generates HTML that the client browser reads. A processor reads the program code and dynamically generates HTML to display content on the web page, as shown in Figure 1-1. Now, because programming code is embedded in the web page, something some- where must run the code to produce the dynamic HTML for the new content. As it turns out, there are two places where the embedded program code can run: » On the client’s computer, after the web browser downloads the web page. This is known as client-side programming. » On the web server before the web page is sent. This is known as server-side programming. This section takes a look at how each of these types of programming differ in cre- ating dynamic content for your website. FIGURE 1-1: Program code embedded in a web page.

Examining the Pieces of Web Programming CHAPTER 1 Examining the Pieces of Web Programming 19 Client-side programming In client-side programming, you embed program code inside the HTML code that the server sends to the client browser with the HTML code. The browser must be able to detect the embedded program code and run it, either inside the browser or as a separate program outside the browser. Figure 1-2 demonstrates this process. JavaScript These days, the most popular client-side programming language is JavaScript. JavaScript is a scripting language that you embed inside the normal HTML code in your web page. It runs within the client browser and can utilize features of the browser that are not normally accessible from standard HTML code. JavaScript code is commonly used to produce pop-up messages and dialog boxes that people inter- act with as they view the page. These are elements that HTML code can’t generate. FIGURE 1-2: Using client-side code in a web page.

20 BOOK 1 Getting Started with Web Programming As shown in Figure 1-2, the entire web page with the embedded JavaScript code is downloaded to the client browser. The client browser detects the embedded JavaS- cript code and runs it accordingly. It does this while also processing the HTML tags within the document and applying any CSS styles defined. That’s a lot for the browser to keep up with! The downside of JavaScript is that, because it runs in the client browser, you’re at the mercy of how the individual web browser interprets the code. Although the HTML language started out as a standard, JavaScript was a little different. In the early days of JavaScript, different browsers would implement different fea- tures of JavaScript using different methods. It was not uncommon to run across a web page that worked just fine for one type of browser, but didn’t work at all in another type of browser — all because of JavaScript processing inconsistencies. Eventually, work was done to standardize JavaScript. The JavaScript language was taken up by the Ecma International standards organization, which created the ECMAScript standard, which is what JavaScript is now based off of. As the ECMAScript standard evolved, more and more browser developers started seeing the benefits of using a standard client-side programming language and incorpo- rated them in their JavaScript implementations. At the time of this writing, the eighth version of the standard, called ECMAScript 2017, has been finalized and implemented in most browsers. The name JavaScript was chosen to capitalize on the popularity of the Java pro- gramming language for use in web applications. However, it doesn’t have any resemblance or relation to the Java programming language. jQuery JavaScript is popular, but one of its downsides is that it can be somewhat com- plicated to program. With so many different features incorporated by so many different developers, today a JavaScript program can quickly turn into a large endeavor to code. To help solve this issue, a group of developers banded together to create a set of libraries to make client-side programming with JavaScript easier. Thus was born jQuery. The jQuery software isn’t a separate programming language; instead, it’s a set of libraries of JavaScript code. The libraries are self-contained JavaScript functions that you can reference in your own JavaScript programming to perform common functions, such as finding a location in a web page to display text or retrieve a value entered into an HTML form field. Instead of having to write lines and lines of JavaScript code, you can just reference one or two jQuery functions to do the work for you. That’s a huge time-saver, as

Examining the Pieces of Web Programming CHAPTER 1 Examining the Pieces of Web Programming 21 well as a great resource for implementing advanced features that you would never have been able to code yourself using just JavaScript. Server-side programming The other side of web programming is server-side programming. Server-side programming languages solve the problem of different client code interpreters by running the code on the server. In server-side programming, the web server interprets the embedded programming code before sending the web page to the client’s browser. The server then takes any HTML that the programming code generates and inserts it directly into the web page before sending it out to the client. The server does all the work running the scripting code, so you’re guar- anteed that every web page will run properly. Figure 1-3 illustrates this process. FIGURE 1-3: Using server-side programming to create a web page.

22 BOOK 1 Getting Started with Web Programming Unlike client-side programming, there are many popular server-side programming languages that are in use these days, each with its own set of pros and cons. This section takes a look at a few of the more popular programming languages. CGI scripting One of the first attempts at server-side programming support was the Apache web server’s Common Gateway Interface (CGI). The CGI provided an interface between the web server and the underlying server operating system (OS), which was often Unix-based. This allowed programmers to embed scripting code commonly used in the Unix platform to dynamically generate HTML. Two of the most common scripting lan- guages used in the Unix world and, thus, commonly used in CGI programming are Perl and Python. Although CGI programming became popular in the early days of the web, it wasn’t long before it was exploited. It was all too easy for a novice administrator to apply the wrong permissions to CGI scripts, allowing a resourceful attacker to gain privileged access to the server. Other methods of processing server-side programming code had to be developed. Java One of the earlier attempts at a controlled server-side programming language was Java. Although the Java programming language became popular as a language for creating stand-alone applications that could run on any computer platform, it can also run as a server-side programming language in web applications. When used this way, it’s called Java Server Pages (JSP). The JSP language requires that you have a Java compiler embedded with your web server. The web server detects the Java code in the HTML code and then sends the code to the Java compiler for processing. Any output from the Java program is sent to the client browser as part of the HTML document. The most common JSP platform is the open-source Apache Tomcat server. The Microsoft ASP.NET family Microsoft’s first entry into the server-side programming world — Active Server Pages (ASP) — had a similar look and feel to JSP. ASP programs embedded ASP scripting code inside standard HTML code and required an ASP server to be incor- porated with the standard Microsoft Internet Information Services (IIS) web server to process the code. However, Microsoft developers determined that it wasn’t necessary to maintain a separate programming language for server-side web programming, so they

Examining the Pieces of Web Programming CHAPTER 1 Examining the Pieces of Web Programming 23 combined the server-side programming and Windows desktop programming environments into one technology. With the advent of the .NET family of pro- gramming languages, Microsoft released ASP.NET for the web environment, as an update to the old ASP environment. With ASP.NET, you can embed any type of Microsoft .NET programming code inside your HTML documents to produce dynamic content. The .NET family of programming languages includes Visual Basic .NET, C#, J#, and even Delphi. NET. This allows you to leverage the same code you use to create Windows desktop applications as you do to create dynamic web pages. You can often use the same Windows features, such as buttons, slide bars, and scrollbars, inside your web applications that you see in Windows applications. JavaScript Yes, you read that right. The same JavaScript language that’s popular in the client-side programming world is now starting to make headway as a server- side programming language. The Node.js library allows you to interface JavaScript code inside HTML web pages for processing on the server. The benefit to using Node.js is that you only need to learn one language for both client-side and server-side programming. Although it’s still relatively new to the game, the Node.js language is becoming more popular. PHP What started out as a simple exercise in tweaking CGI scripts turned into a new server-side programming language that took the world by storm. Rasmus Lerdorf wrote the Personal Home Page (PHP) programming language as a way to improve how his CGI scripts worked. After some encouragement and help, PHP morphed into its own programming language, and a new name, PHP: Hypertext Preproces- sor (yes, it uses the acronym inside its name, which is called a recursive acronym). The PHP language developers freely admit that they borrowed many features from other popular languages, such as Perl, Python, C, and even Unix shell scripting. However, PHP was developed specifically for server-side programming, and it has many features built in that aren’t available in other scripting languages. You don’t need to wrestle with strange setups or features to get PHP to work in a web envi- ronment. It has matured into a complete catalog of advanced features that cover everything from database access to drawing graphics on your web page. Because of the dedication of the PHP developers to create a first-rate server- side programming language, and because it’s free open-source software, PHP quickly became the darling of the Internet world. Many web-hosting companies include PHP as part of their basic hosting packages. If you already have space on a web-hosting server, it’s possible that you already have access to PHP!

24 BOOK 1 Getting Started with Web Programming Combining client-side and server-side programming Client-side and server-side programming both have pros and cons. Instead of trying to choose one method of creating dynamic web pages, you can instead use both at the same time! You can easily embed both client-side and server-side programming code into the same web page to run on the server, as shown in Figure 1-4. FIGURE 1-4: Combining client-side and server-side programming.

Examining the Pieces of Web Programming CHAPTER 1 Examining the Pieces of Web Programming 25 One common use for JavaScript and PHP coding is data validation. When you pro- vide an HTML form for your website visitors to fill out, you have to be careful that they actually fill in the correct type of data for each field. With server-side pro- gramming, you can’t validate the data until the site visitor completes and submits the form to the server. If a website visitor accidentally skips filling out a single field and the entire form needs to be filled out all over again, that can be a frus- trating experience. To solve that problem, you can embed JavaScript code into the form to check as the site visitor enters data into the form. If any form fields are empty when the Submit button is clicked, the JavaScript code can block the form submission and point out the empty field. Then, when all the data is completed and the form is successfully submitted, the PHP code on the server can process the data to ensure it’s the correct data type and format. Storing Content The last piece of the dynamic web application puzzle is the actual content. With static web pages, content is already built into the web page code. To change infor- mation on a static web page, you have to recode the page. Unfortunately, more often than not, when a web page is updated, the old version is lost. With dynamic web applications, the content comes from somewhere outside of the web page. But where? The most common place is a database. Databases are an easy way to store and retrieve data. They’re quicker than storing data using standard files, and they provide a level of security to protect your data. By storing content in a database, you can also easily archive and reference old content and replace it with new content as needed. Much like the server-side programming world, the database world has lots of dif- ferent database software options. Here are some of the more popular ones: » Oracle: Oracle has set the gold standard for databases. It’s found in many high-profile commercial environments. Although Oracle is very fast and supports lots of features, it can also be somewhat expensive. » Microsoft SQL Server: Microsoft’s entry into the database server world, SQL Server is geared toward high-end database environments. It’s often found in environments that utilize Microsoft Windows Servers.

26 BOOK 1 Getting Started with Web Programming » PostgreSQL: The PostgreSQL database server is an open-source project that attempts to implement many of the advanced features found in commercial databases. In its early days, PostgreSQL had a reputation for being somewhat slow, but it has made vast improvements. Unfortunately, old reputations are hard to shake, and PostgreSQL still struggles with overcoming them. » MySQL: The MySQL database server is yet another open-source project. Unlike PostgreSQL, it doesn’t attempt to match all the features of commercial packages. Instead, it focuses on speed. MySQL has a reputation for being very fast at simple data inserts and queries — perfect for the fast-paced web application world. Mainly because of its speed, the MySQL database server has become a popular tool for storing data in dynamic web applications. It also helps that, because it’s an open-source project, web-hosting companies can install it for free, which makes it a perfect combination with the PHP server-side program- ming language for dynamic web applications.

CHAPTER 2 Using a Web Server 27 Using a Web Server B efore you can start developing dynamic web applications, you’ll need a web server environment to work in. You have lots of different choices available to create your own development environment, but sometimes having more options just makes things more confusing. This chapter walks through the differ- ent options you have for creating your development environment. Recognizing What’s Required Just like that famous furniture that needs assembly, you’ll need to assemble some separate components to get your web application development environment up and running. There are three main parts that you need to assemble for your web development environment: » A web server to process requests from browsers to interact with your application » A PHP server to run the PHP server-side programming code in your application » A database server to store the data required for your dynamic application On the surface, this may seem fairly simple, but to make things more complicated, each of these parts has different options and versions available. That can lead to literally hundreds of different combinations to wade through! Chapter 2 IN THIS CHAPTER » Exploring your development options » Picking a development environment » Configuring the servers

28 BOOK 1 Getting Started with Web Programming This section helps you maintain your sanity by taking a closer look at each of these three requirements. The web server The web server is what interacts with your website visitors. It passes their requests to your web application and passes your application responses back to them. The web server acts as a file server — it accepts requests for PHP and HTML files from client browsers and then retrieves those files and sends them back to the client browser. As I explain in the preceding chapter, the web server uses the HTTP standard to allow anonymous requests for access to the files on the server and respond to those requests. There are quite a few different web server options around these days. Here are a few of the more popular ones that you’ll run into: » Apache: The granddad of web servers, Apache was derived from the original web server developed at the University of Illinois. It’s an open-source software project that has been and is currently the most commonly used web server on the Internet. It is very versatile and supports lots of different features, but with versatility comes complexity. Trying to wade through the configuration file for an Apache web server can be confusing. But for most web environments you just need to change a few of the default configuration settings. » nginx: The newer kid on the block, nginx is intended to ease some of the complexity of the Apache web server and provide improved performance. It’s currently gaining in popularity, but it still has a long way to go to catch up with Apache. » lighthttpd: As its name suggests, lighthttpd is a lightweight web server that’s significantly less versatile and complex than the Apache web server. It works great for small development environments and is becoming popular in embedded systems that need a web server with a small footprint. However, it doesn’t hold up well in large-scale production Web server environments and probably isn’t a good choice for a web development environment. » IIS: IIS is the official Microsoft Web server. It’s popular in Microsoft Windows server environments, but there aren’t versions for other operating systems. IIS focuses on supporting the Microsoft .NET family of server-side programming languages, such as C# .NET and Visual Basic .NET, but it can be interfaced with the PHP server. This configuration is not common, though, and you don’t see very many PHP servers that utilize the IIS web server. As you can tell from these descriptions, just about every web server is compared to the Apache web server. Apache has become the gold standard in Internet web

Using a Web Server CHAPTER 2 Using a Web Server 29 servers. Unless you have a specific reason for not using the Apache web server, you should use it for your development environment, especially if you know that your production web server environment will use it. The PHP server The PHP programming language began in 1995 as a personal project by Rasmus Lerdorf to help his web pages access data stored in a database. He released the first official version 1.0 to the open-source community on June 8, 1995. Since then, the PHP language has taken on a life of its own, gaining in both fea- tures and popularity. The development of the PHP language is currently supported by Zend, which produces many PHP tools. One of the most confusing aspects of the PHP server is that there are currently two different actively supported branches of the PHP language: » The version 5.x branch » The version 7.x branch The first question that often comes to mind is: “What happened to version 6?” The short-lived version 6 of PHP had some unresolvable issues and was officially abandoned by the PHP developers, with the new features rolled back into version 5. Now for the second question: “Why two active versions?” The version 5.x branch is still maintained mainly because of the great wealth of applications that con- tinue to use features supported in version 5.x, but not in version 7.x. It will take some time before all the old 5.x applications will be migrated to version 7.x code. Unfortunately, version 7 of PHP breaks quite a few things that were popular in the 5.x version. However, the PHP developers are no longer performing bug fixes in the 5.x branch, only security patches. At the time of this writing, the current ver- sion in the 5.x branch is 5.4 and will be maintained until the end of 2018. At the time of this writing, many popular web server packages support both the 5.x and 7.x version branches and will give you the choice of which one to use for your installation. If you’re developing new dynamic web applications, it’s best to use the 7.x version branch; at the time of this writing, the latest version is 7.2. The PHP server contains its own built-in web server, but that’s only intended for development and not for use as a live production web server. For large-scale use, you must interface the PHP server with a web server. As the web server receives requests for .php files, it must pass them to the PHP server for processing. You must set up this feature as part of the web server configuration file. This is dis- cussed later in this chapter in the “Customizing the Apache Web Server” section.

30 BOOK 1 Getting Started with Web Programming You may still run into some web-hosting companies that use PHP version 4. This was a very popular and long-running version, but it’s no longer supported by PHP with security patches. It’s best to stay away from any web host that only supports PHP version 4. The database server As I describe in Chapter 1 of this minibook, there are many different types of data- base servers to handle data for your web applications. By far the most popular used in open-source web applications is the MySQL server. Many websites and web packages use the term MySQL Server, but there are actually a few different versions of it. Because Oracle acquired the MySQL project in 2010, it has split the project into four versions: » MySQL Standard Edition: A commercial product that provides the minimal MySQL database features. » MySQL Enterprise Edition: A commercial product that provides extra support, monitoring, and maintenance features. » MySQL Cluster Carrier Grade Edition: A commercial product that in addition to the Enterprise Edition features, supports multi-server clustering. » MySQL Community Edition: The freely downloadable version of MySQL that supports the same features as the Standard Edition, but with no formal support. As you can see from the list, the MySQL server has both commercial and open- source versions. The commercial versions support some advanced features that aren’t available in the Open Source version, such as hot backups, database activity monitoring, and being able to implement a read/write database cluster on multiple servers. These advanced features can come in handy in large-scale database envi- ronments, but for most small to medium-size database applications, the MySQL Community Edition is just fine. That’s what’s usually included in most web server packages. Just as with PHP, the MySQL project maintains multiple versions of the MySQL server software. At the time of this writing, the currently supported versions of MySQL are » Version 5.5 » Version 5.6 » Version 5.7

Using a Web Server CHAPTER 2 Using a Web Server 31 Each version has some minor updates to the MySQL database engine, but for most dynamic web applications, the differences won’t play a significant role in your application performance or functions, so it won’t matter much which of these three versions your system uses. Several cloud providers (including Oracle itself) provide the MySQL server as a cloud service. Instead of installing and running your own MySQL server you can rent space on their MySQL cloud server. The benefit of running MySQL in the cloud is that you’re guaranteed perfect up-time for the database, because it’s dis- tributed among multiple servers in the cloud. The downside, though, is that this can get expensive and is only recommended for commercial web applications that require the extra server power provided by the cloud. Considering Your Server Options Now that you know you’ll need a web server, a PHP server, and a MySQL server for your development work, the next step is trying to find an environment that supports all three (and it would help if they were all integrated). You basically have three options for setting up a complete web programming development environment: » Purchase space on a commercial server from a web-hosting company. » Install the separate servers on your own workstation or server. » Install an all-in-one package that bundles all three servers for you. MySQL AND MariaDB The MySQL server project has had quite an interesting life. It was originally developed in 1994 as an open-source project by a Swedish company, MySQL AB. It gained in popular- ity and features, until MySQL AB was purchased by Sun Microsystems in 2008. However, Oracle purchased Sun Microsystems in 2010 and took control over the MySQL project. When Oracle purchased the rights to MySQL from Sun Microsystems, the main MySQL developer and his team left to start their own separate open-source branch of MySQL, called MariaDB. With the terms of the open-source license, this move was completely legal, and the project has gained some respect and following in the open-source com- munity. MariaDB is nearly 100 percent compatible with MySQL and is often used as a direct replacement for the MySQL Community Edition in some environments. Any PHP code that you write to interact with the MySQL server will also work with the MariaDB server. Don’t be alarmed if the development environment you use switches to MariaDB!

32 BOOK 1 Getting Started with Web Programming The following sections walk you through each of these scenarios and the pros and cons of each. Using a web-hosting company By far, the easiest method of setting up a PHP programming environment is to rent space on an existing server that has all the necessary components already installed. Plenty of companies offer PHP web development packages. Some of the more popular ones are » GoDaddy (www.godaddy.com) » HostGator (www.hostgator.com) » 1&1 (www.1and1.com) » 000webhost (www.000webhost.com) These large web-hosting companies offer multiple levels of support for their ser- vices. Often, they’ll offer several tiers of service based on the number of databases you can create, the amount of data that you can store, and the amount of network bandwidth your web applications are allowed to consume per month. That way, you can start out with a basic package for minimal cost and then upgrade to one of the more expensive packages as your Internet application takes off! It pays to shop around to check different pricing structures and support levels at the differ- ent web-hosting companies. Besides these main competitors, you’ll find many, many smaller web host- ing companies willing to offer MySQL/PHP packages to host your applications. There’s a good chance if you already have a web-hosting company you use to host your static web pages, it’ll have some type of MySQL/PHP support. If you already have space on a web server for your website, check with them to see if they offer an upgrade to a MySQL/PHP package. With the popularity of the new “cloud” environment where everything runs on shared server space, there are now a few more participants in the PHP server hosting game. The Wikipedia web page for cloud service providers lists more than 200 different providers! You’ll probably recognize the more popular ones: » Amazon Web Services (AWS) » Google Cloud Platform » Oracle Cloud Platform » Microsoft Azure

Using a Web Server CHAPTER 2 Using a Web Server 33 Each of these cloud services provides some level of support for PHP program development. One of the main benefits of utilizing a cloud service is that your application is hosted on multiple servers that share the traffic load and are redun- dant for backup purposes. If a server in the cloud crashes, your application will still work on other servers. Of course, be prepared to pay a premium price for those features! Be careful with some of the smaller web-hosting companies. These days, just about anyone can install the PHP and MySQL server software onto a server and sell space, so many “mom-and-pop” web-hosting companies now provide this service. However, installing the server programs is different from maintaining the server programs. Often, you’ll find these smaller web-hosting sites use outdated server versions that haven’t been upgraded or patched with security updates, making them vulnerable to attacks. Building your own server environment I wouldn’t recommend it for a live production website, but for development work you can build your own web server environment. You don’t even need to have a large server for a personal web development environment — you can build it using your existing Windows or Apple workstation or laptop. The following sections walk you through the basics you need to know to get this working in either the Linux or Windows/Mac environments. Web servers in Linux Linux desktops and servers are becoming more popular these days, especially for web development. You can download the Apache, MySQL, and PHP server source code packages and compile them on your Linux system, but unless you need the absolute latest version of things, that’s not the recommended way to do it. These days, most Linux distributions include packages for easily installing all the components you need for a complete web development environment. For Debian-based Linux distributions (such as Ubuntu and Linux Mint), you use the apt-get command-line tool to install software packages. For Red Hat–based Linux distributions (such as Red Hat, CentOS, and Fedora) you use the dnf command-line tool.

34 BOOK 1 Getting Started with Web Programming For Debian-based systems, such as Ubuntu, follow these steps to do that: 1. From a command prompt, install the Apache web server using the following command: sudo apt-get install apache2 2. Install the MySQL server package using the following command: sudo apt-get install mysql-server During the MySQL server installation, you’ll be prompted for a password to use for the root user account. The root user account in MySQL has full privileges to all tables and objects. Make sure you remember what password you enter here! 3. Install the PHP packages to install the PHP server and required extensions, the Apache modifications to run PHP, and the graphical phpMyAdmin tool: sudo apt-get install php libapache2-mod-php sudo apt-get install php-mcrypt php-mysql sudo apt-get install phpmyadmin The first line installs the main PHP server, along with the Apache module to interface with the PHP server. The second line installs two PHP extensions that are required to interface with the MySQL server. The third line installs the web-based phpMyAdmin PHP program, which provides a web interface to the MySQL server. 4. Open a browser and test things out by going to the following URL: http://localhost/phpmyadmin You should be greeted by the phpMyAdmin administration window. 5. Log in using the MySQL root user account and the password you supplied when you installed MySQL (you remember it, right?). Figure 2-1 shows the main phpMyAdmin web page, which shows what versions of the Apache, PHP, and MySQL servers are running.

Using a Web Server CHAPTER 2 Using a Web Server 35 For Red Hat–based systems, such as Fedora and CentOS, follow these steps to load LAMP: 1. From a command prompt, install the Apache web server using the following commands: sudo dnf install httpd sudo systemctl enable httpd sudo systemsctl start httpd The httpd package includes the Apache2 web server. The executable file for Apache is named httpd (thus, the name of the package). The package doesn’t start the Apache web server by default, so the second two lines use the systemctl utility to enable the service so it starts automatically at boot time and then starts it. 2. Install the MySQL server package using the following commands: sudo dnf install mariadb-server sudo systemctl enable mariadb sudo systemctl start mariadb FIGURE 2-1: The main phpMyAdmin web page showing everything that is running.

36 BOOK 1 Getting Started with Web Programming Notice that the Red Hat distribution (and thus CentOS and Fedora) has gone with the MariaDB replacement package for MySQL. When you install MariaDB, the package sets the root user account password to an empty string. This is not recommended if your server is on any type of a network. Fortunately, there’s a quick utility that you can run to change the root user account’s password: mysql_secure_installation When you run this script, it’ll prompt you to answer a few questions, such as the new password for the root user account, whether to restrict the root user account to only logging in from the local host, whether to remove the anony- mous users feature, and whether to remove the test database. 3. Install the PHP packages using the following commands: sudo dnf install php php-mbstring php-mysql sudo dnf install phpmyadmin sudo systemctl restart httpd The PHP server doesn’t run as its own service — the Apache web server spawns it when needed. Because of that, you do need to use the systemctl utility to restart the Apache web server so it rereads the configuration file with the new PHP settings. 4. Open a browser and test things out by going to the following URL: http://localhost/phpmyadmin You should see the phpMyAdmin login page. 5. Log in using the root user account in MySQL along with the password you defined when you installed MySQL. Figure 2-2 shows phpMyAdmin running on a CentOS 7 system. By using the distribution software packages for each server, you’re guaranteed that the server will run correctly in your Linux environment. An additional benefit is that the distribution software updates will include any security patches or bug fixes released for the servers automatically. Web servers in Windows and Mac Installing and running the Apache, MySQL, and PHP servers in a Windows or Mac environment is very tricky, because there are lots of factors involved in how to install and configure them. For starters, both Windows and macOS come with a web server built in, so if you install the Apache web server you’ll need to configure it to use an alternative TCP port.

Using a Web Server CHAPTER 2 Using a Web Server 37 Likewise, macOS includes an older version of PHP by default, so if you install an updated version of PHP, things get tricky trying to make sure which version is active. Because of these complexities, it’s not recommended for beginners to install the Apache, MySQL, and PHP packages separately in the Windows and Mac environ- ments. There’s a much simpler way of getting that to work, which I’ll describe in the next section. Using premade servers Trying to get a working Apache, MySQL, and PHP server in Windows (called WAMP) or in the Mac environment (called MAMP) can be a complicated process. There’s a lot of work downloading each of the individual server packages, config- uring them, and getting things to work together. Fortunately, some resourceful programmers have done that work for us! There are quite a few open-source packages that bundle the Apache web server, MySQL (or MariaDB) server, and PHP server together to install as a single package. This is by far the best way to go if you plan on using your Windows or Mac workstation or laptop as your web development environment. FIGURE 2-2: Viewing the phpMyAdmin main web page on Fedora 27.

38 BOOK 1 Getting Started with Web Programming There are quite a few pre-loaded packages available, but these are the most com- mon ones: » XAMPP: An all-in-one package that supports PHP and Perl server-side programming and also includes an email and FTP server, along with a self-signed certificate to use the Apache web server in HTTPS mode. It has installation packages available for Windows, Mac, and Linux. » Wampserver: A Windows-based all-in-one package that allows you to install multiple versions of the Apache, MySQL, and PHP servers at the same time. You can then mix-and-match which versions of which server you have active at any time, allowing you to duplicate almost any web-hosting environment. » MAMP: A Mac-based all-in-one package that is easy to install and use. It also has a commercial package called MAMP Pro that provides additional features for managing your web environment for professional developers. Of these, the XAMPP package is by far the most popular. It was created by the Apache Friends organization to help promote the use of the Apache web server in web development environments. Follow these steps to install XAMPP in a Win- dows or macOS environment: 1. Open your browser and go to www.apachefriends.org. 2. Look for the Download section of the web page and click the link for the OS you’re using. 3. After the download finishes, run the downloaded file in your OS environment. This starts the XAMPP installation wizard. 4. Click the Next button to go to the Select Components window, shown in Figure 2-3. The Select Components window allows you to select which components in XAMPP you want installed. You won’t use everything contained in XAMPP for this book, but feel free to install the entire package and explore on your own! 5. Click the Next button to continue the installation. 6. Select the installation folder for XAMPP. The default location for Windows is c:\xampp; for macOS, it’s /Applications/ XAMPP. Those will work just fine for both environments. 7. Click the Next button to continue the installation. The Apache Friends organization has teamed up with Bitnami, which has prepackaged many popular web applications specifically for use in XAMPP.

Using a Web Server CHAPTER 2 Using a Web Server 39 8. You can learn more about Bitnami by leaving the Learn More about Bitnami for XAMPP check box checked, or if you’d like to skip this step, remove the check mark from the check box, and then click the Next button to continue. 9. Click the Next button to begin the software installation. 10. You can keep the check mark in the check box to start XAMPP, and then click the Finish button to end the wizard. The XAMPP Control Panel provides easy access to start, stop, and configure each of the servers contained in the XAMPP package. Figure 2-4 shows the main Con- trol Panel window. FIGURE 2-3: The XAMPP Select Components window in the installation wizard. FIGURE 2-4: The main XAMPP Control Panel window.

40 BOOK 1 Getting Started with Web Programming By default, XAMPP configures the Apache web server to use TCP port 80 for HTTP connections. Unfortunately, this port is often in use by web servers built into Win- dows and Mac workstations and servers. This will produce an error message when you first start the XAMPP Control Panel, as shown in Figure 2-4. You can move the Apache web server to an alternative TCP port. Just follow these steps: 1. From the XAMPP Control Panel main window, click the Config button for the Apache web server. 2. Select the menu option to edit the httpd.conf configuration file. This opens the Apache web server configuration file in a text editor. 3. Look for the line: Listen 80 4. Change the 80 in the line to 8080, a common alternative TCP port to use for HTTP communications. 5. Save the updated configuration file in the editor, and then exit the editor window. 6. Click the Start button for the Apache web server. The Apache Web server should indicate that it has started and is using both TCP Ports 443 (for HTTPS) and 8080 (for HTTP). 7. Click the Start button for the MySQL database server. The MariaDB database server should indicate that it has started and is using TCP Port 3306 (the default TCP port for MySQL). After the Apache and MySQL servers start, you can exit the XAMPP Control Panel. If you need to stop the servers, reopen the XAMPP Control Panel and click the Stop buttons for both servers. Although you’ve moved the Apache web server in the configuration file, XAMPP will still check to see if TCP Port 80 is available when you start the XAMPP Control Panel and complain that it’s not available. To stop that, click the Config button in the Control Panel and then remove the check mark for the Check Default Ports on Startup check box.

Using a Web Server CHAPTER 2 Using a Web Server 41 Tweaking the Servers When you get the Apache, MySQL, and PHP servers installed in your development environment, you may need to do a little bit of tweaking to get them working just the way you want. Each of the servers uses a text configuration file to define just how the server behaves. The following sections walk you through how to find the configuration files and some of the settings that you may need to tweak for your development environment. Customizing the Apache Server By default, the Apache Web server uses the httpd.conf configuration file to store its settings. For Linux and Mac systems, the file is usually stored in the /etc folder structure, often under either /etc/httpd or /etc/apache2. The XAMPP package installs the Apache configuration file in the c:\xampp\ apache\conf folder in Windows or /Applications/XAMPP/apache/conf in macOS. The httpd.conf configuration file contains individual lines called directives. Each directive defines one configuration option, along with the value that you set. The Apache web server is very versatile, with lots of different options and fea- tures. The downside to that is it can make the configuration seem complex at first, but the configuration file is organized such that you should be able to find what you’re looking for relatively easily. In the following sections, I cover a few things that you’ll want to pay attention to. Many systems break the Apache web server configurations into multiple files to help make the features more modular. Look for the Include directive lines in the main httpd.conf configuration file to see what other files contain Apache web server configuration settings. Defining the web folder location The main job of the Apache web server is to serve files to remote clients. However, you don’t want just anyone retrieving just any file on your system! To limit what files the Apache server serves, you must restrict it to a specific folder area in the system. You set the folder where the Apache web server serves files using the Document- Root directive: DocumentRoot c:/xampp/htdocs

42 BOOK 1 Getting Started with Web Programming The htdocs folder is the normal default used for the Apache web server in Windows and macOS environments (for macOS, it’s located in /Applciations/ XAMPP/htdocs). For Linux environments, it has become somewhat common to use /var/www/html as the DocumentRoot folder. If you choose to move the DocumentRoot folder to another folder location on the server, make sure the user account that runs the Apache web server has access to at least read files from the folder. Setting the default TCP port The Apache web server listens for incoming connections from client browsers using two different default TCP network ports: » TCP port 80 for HTTP requests » TCP port 443 for HTTPS requests HTTPS requests use encryption to secure the communication between the browser and the server. This method is quickly becoming a standard for all web servers on the Internet. You set the ports the Apache web server accepts incoming requests on using the Listen directive: Listen 80 Listen 443 You can use multiple Listen directives in the configuration file to listen on more than one TCP port. USING ENCRYPTION To establish a secure HTTPS connection, your Apache web server must have a valid encryption certificate signed by a certificate authority. The certificate authority recognizes your website as valid and vouches for your authenticity. This enables your website visitors to trust that you are who you say you are and that your web server is what it says it is. Unfortunately, signed certificates must be purchased and can be somewhat expensive. For development work, you can use a self-signed certificate. The self-signed certificate is what it says: You sign your own certificate. This doesn’t instill any trust in your website visitors, so don’t use a self-signed certificate on a production website — only use it for development. The XAMPP web server installs a self-signed certificate just for this purpose!

Using a Web Server CHAPTER 2 Using a Web Server 43 Interacting with the PHP server The Apache web server must know how to pass files that contain PHP code to the PHP server for processing. This is a two-step process. First, you have to tell the Apache web server to load the PHP server module so that it can establish the link between the Apache and PHP servers. You do that using the LoadModule directive: LoadModule php7_module "c:/xampp/php/apache2_4.dll" After Apache loads the PHP module, you have to tell it what type of files to send to the PHP server. You do this using the AddHandler directive: AddHandler application/x-httpd-php .php This directive tells the Apache web server to forward all files with the .php file extension to the PHP module, which then forwards the files to the PHP server for processing. It may be tempting to just forward all .html files to the PHP server, because the PHP server will pass any HTML code directly to the client browser. However, this will add extra processing time to load your static web pages, causing a perfor- mance issue with your HTML pages. Tracking errors When working in a development environment, it’s always helpful to be able to track any errors that occur in your applications. The Apache web server supports eight different levels of error messages, shown in Table 2-1. TABLE 2-1 Apache Web Server Error Levels Error Level Description emerg A fatal error will halt the Apache web server. alert A severe error will have an adverse impact on your application and should be resolved immediately. crit A critical condition caused the operation to fail, such as a failure to access the network. error An error occurred in the session, such as an invalid HTTP header. warn A minor issue occurred in the session but didn’t prevent it from continuing. notice Something out of the normal occurred. debug A low-level detailed message occurs for each step the server takes in processing a request.

44 BOOK 1 Getting Started with Web Programming You define the level of error tracking using the LogLevel directive and the location of the error log using the ErrorLog directive: LogLevel warn ErrorLog logs/error.log The debug log level can be useful for troubleshooting issues but is not recom- mended for normal activity, because it generates lots of output! You can customize the appearance of the log messages using the LogFormat direc- tive. Apache allows you to determine just what information appears in the log file, which can be handy when trying to troubleshoot specific problems. Consult the Apache server documentation for the different options you have available for customizing the logs. Customizing the MySQL server The MySQL server uses two different filenames for its configuration settings: » my.cnf for Linux and Mac systems » my.ini for Windows systems One of the more confusing features about the MySQL server is that there are three ways to specify configuration settings: » They can be compiled into the executable server program when built from source code. » They can be specified as command-line options when the server starts. » They can be set in the MySQL configuration file. You can compile all the settings you need into the MySQL executable server pro- gram and run with no configuration file at all (that’s the approach the MAMP all-in-one package takes). The downside to that is it’s hard to determine just which settings are set to which values. Most MySQL server installations use a combination of compiling some basic set- tings into the executable server program and creating a basic configuration file for the rest. The setting values set in the configuration file override anything com- piled into the executable server program or set on the command line.

Using a Web Server CHAPTER 2 Using a Web Server 45 As with the Apache web server, the MySQL database server has lots of options you can change in the configuration file to fine-tune how things work. That said, there are only a few items that you’d ever really need to tweak in a normal setup. The following sections walk you through some of the settings you should become familiar with. The core server settings The core server settings define the basics of how the MySQL server operates. These settings in the XAMPP for Windows setup look like this: [mysqld] port = 3306 socket = "C:/xampp/mysql/mysql.sock" basedir = "C:/xampp/mysql" tmpdir = "C:/xampp/mysql/tmp" datadir = "C:/xampp/mysql/data" log_error = "mysql_error.log" The port setting defines the TCP port the MySQL server listens for incoming requests on. The socket setting defines the location of a socket file that local cli- ents can use to communicate with the MySQL server without using the network. The basedir, tmpdir, and datadir settings define the locations on the server that MySQL will use for storing its working files. The datadir setting defines where MySQL stores the actual database files. Working with the InnoDB storage engine The InnoDB storage engine provides advanced database features for the MySQL server. It has its own set of configuration settings that control exactly how it oper- ates and how it handles the data contained in tables that use that storage engine. There are two main configuration settings that you may need to tweak for your specific MySQL server installation: innodb_data_home_dir = "C:/xampp/mysql/data" innodb_data_file_path = ibdata1:10M:autoextend The innodb_data_home_dir setting defines the location where MySQL places files required to support the InnoDB storage engine. This allows you to separate those files from the normal MySQL database files if needed.

46 BOOK 1 Getting Started with Web Programming The innodb_data_file_path setting defines three pieces of information for the storage engine: » The filename MySQL uses for the main InnoDB storage file » The initial size of the storage file » What happens when the storage file fills up To help speed up the data storage process, the InnoDB storage engine pre- allocates space on the system hard drive for the database storage file. That way, for each data record that’s inserted into a table, the storage engine doesn’t need to ask the operating system for more disk space to add to the database file — it’s already there! This greatly speeds up the database performance. The second parameter defines the initial amount of disk space that the InnoDB storage engine allocates. The third parameter is where things get interesting. It defines what the InnoDB storage engine does when the space allocated for the storage file becomes full. By default, the InnoDB storage engine will block new data inserts to the tables when it runs out of allocated storage space. You would have to manually extend the storage file size. When you specify the autoextend setting, that allows the InnoDB storage engine to automatically allocate more space for the file. That’s convenient, but it can also be dangerous in some environments. The InnoDB storage engine will keep allocating more storage space as needed until the server runs out of disk space! When you use the InnoDB storage engine for your MySQL applications, it’s always a good idea to keep an eye on the storage space folder to make sure it’s not taking up all the server disk space. Customizing the PHP server The PHP server configuration file is named php.ini, but it can be located in several different areas. The locations that the PHP server checks are (in order): » The path set in the PHPIniDir directive in the Apache web server configuration file » The path set in a system environment variable named PHPRC » For Windows systems, the path set in the registry key named IniFilePath under the HKEY_LOCAL_MACHINE/Software/PHP registry hive » The folder where the PHP server executable file is stored

Using a Web Server CHAPTER 2 Using a Web Server 47 » The default web server’s folder » The OS system folder, which for Windows is the c:\winnt folder, and for Linux and Mac the /usr/local/lib folder The XAMPP install process places the php.ini file in the c:\xampp\apache\bin folder. If you’re ever in doubt as to which php.ini configuration file the PHP server is using, run the phpinfo() function in a small PHP program. For your convenience, all the popular all-in-one packages provide a link to run the phpinfo() function from their main web pages. Figure 2-5 shows the output from the phpinfo() function in XAMPP running on a Windows system. The phpinfo() function displays the system values for each of the configuration file settings and if any were overridden by a local setting. Look for the Loaded Configuration File entry that shows the path to the active php.ini file to see where that file is located for your PHP server. FIGURE 2-5: The phpinfo() function output.

48 BOOK 1 Getting Started with Web Programming As you can imagine, there are lots of settings available in the php.ini configu- ration file. Here are some of the php.ini settings (and the default values set in XAMPP) that you may need to tweak on your PHP server: » date.timezone = Europe/Berlin: Defines the time zone of the PHP server. This must use a time zone value defined at http://php.net/manual/en/ timezones.php. » display_errors = On: Defines whether PHP error messages appear on the web page. This feature is extremely handy for development work but should be disabled for production servers. » error_reporting = E_ALL & ~E_DEPRECATED: Sets the level of error reporting from the PHP server. PHP uses a complicated bit pattern to set which errors to display or not display. It uses labels to indicate the error level and Boolean bitwise operators to combine the levels — the tilde (~) indicates the NOT operator. The error levels are: • E_ERROR: Fatal run-time errors • E_WARNING: Run-time warnings that won’t halt the script • E_PARSE: Parsing syntax errors • E_NOTICE: Script encountered something that could be an error and effect the results • E_CORE_ERROR: Fatal error that prevents PHP from starting • E_CORE_WARNING: Non-fatal errors during startup • E_COMPILE_ERROR: Fatal error while compiling the PHP code • E_COMPILE_WARNING: Non-fatal errors during compile time • E_USER_ERROR: Fatal error message generated manually by your PHP code • E_USER_WARNING: Non-fatal error message generated manually by your PHP code • E_USER_NOTICE: Notice message generated manually by your PHP code • E_STRICT: PHP detected code that doesn’t follow the PHP strict rules • E_RECOVERABLE_ERROR: A fatal error that you can catch with a try-catch block • E_DEPRECATED: The PHP parser detected code that will no longer be supported • E_USER_DEPRECATED: A deprecation error generated manually by your PHP code • E_ALL: All errors and warnings except E_STRICT

Using a Web Server CHAPTER 2 Using a Web Server 49 » variables_order = "GPCS": The order in which PHP populates the data from the HTTP session (G = GET, P = POST, C = Cookies, and S = System variables) » short_open_tag = Off: Determines if you can use the <? tag to identify PHP code in your HTML documents » max_execution_time = 30: Sets a time limit (in seconds) for a PHP program to run before the PHP server kills it (This is useful for stopping programs stuck in a loop!) » memory_limit = 128M: Sets a limit on how much memory on the physical server the PHP server can allocate (This also helps prevent runaway programs from taking down the entire web server!)

CHAPTER 3 Building a Development Environment 51 Building a Development Environment W hen you’re ready to start coding your web application, you’ll need some tools to help you out. Just as a carpenter needs a set of tools to do her job, web developers need tools as well. And just as the carpenter has a wide selection of tools to choose from, so do web developers. A carpenter can build an entire house using a hammer and hand saw (and possibly a tape measure), but most likely, she has a few more advanced tools to make her job easier. Likewise, you can build an entire web application using a standard text editor, but there are plenty of other tools around to make your job easier. The trick to becoming comfortable with web programming is to find the right tool, or combination of tools, for the task at hand. This chapter walks you through some of the tools that you can use to help make your programming job easier. But first, I start by telling you what not to use. Knowing Which Tools to Avoid Before I get too far into the tool discussion, I need to tell you what tools not to use for serious web-programming jobs. These days, plenty of tools are available to help novice web designers create their own web pages without doing any coding at all. However, trying to develop dynamic web applications with these tools can create more problems than they’re worth. Here are some of the tools you should avoid. Chapter 3 IN THIS CHAPTER » Identifying which tools to avoid » Finding the right tools for the job

52 BOOK 1 Getting Started with Web Programming Graphical desktop tools Graphical desktop tools allow you to create a web page using a purely graphical interface, without having to do any coding. The most popular of these tools are the Microsoft Expression Web package and Adobe Dreamweaver. Both of these tools use the what you see is what you get (WYSIWYG) method of creating web pages. Instead of an editor for writing code, the tool presents you with a graphical canvas that represents your web page. To add features to the web page, you drag and drop elements like text, menus, images, or multimedia clips onto the canvas. When you’ve created the web page layout, you click a button and the tool automatically generates all the HTML and CSS code required to build the web page. Click another button and the tool automatically uploads the files to your web-hosting server and you have a complete web page. At first, tools like these may sound like a great idea, but they have some drawbacks: » You have little control over the HTML and CSS code the tools automati- cally generate. Because the tools need to generate code for all sorts of environments and applications, the code they generate is somewhat generic and can be bloated and unnecessarily complicated. » Because of the code bloat, it’s extremely difficult to add or modify any of the code that the tools generate. » When you use a graphical desktop tool to create your website, you’re stuck using that tool forever. Just like other desktop software packages, graphical desktop tools often change features as new versions come out. Old features are dropped and new features are added, sometimes forcing you to change the way you design your website. You’re stuck in an endless loop of purchasing upgrades and learning new features just to maintain your website. » The WYSIWYG principle isn’t always accurate. The layout you create in the canvas may not always represent what appears in web pages for all browsers and devices that people use to view your website. Web-hosting sites Besides the graphical desktop tools, there are also web-hosting sites that mimic that type of web page design. Web-hosting sites such as Squarespace and Weebly are oriented toward novice non-programmers who want to build their own web- sites. These sites allow people with no experience to get a simple static website up and running in practically no time, and as you can imagine, they’re becoming very popular.

Building a Development Environment CHAPTER 3 Building a Development Environment 53 These sites have all the same drawbacks as the desktop graphical tools. Plus, many of them don’t even let you see the HTML and CSS code that they generate. With these template-based sites, you’re completely at their mercy. You can never migrate your web application to a different host (which is exactly what they want). Word processors Some word-processing software packages, such as Microsoft Word and Apple Pages, offer the ability to convert documents into web pages. This feature has the same drawbacks as the fancier WYSIWYG tools: You can’t control the code they generate, and the code they do generate is often bloated. Stay away from creating web pages using word processors. Also stay away from the temptation to write your web application code using a word processor. Most word processors embed binary characters into the text, even if you save the document in a text mode. This causes all sorts of problems when you try to view the web page in a browser. Working with the Right Tools Now that you know which tools to avoid, you’re ready to look at the tools you can use to get the job done right. In this section, I fill you in on text editors, program editors, integrated development environments, and browser debuggers. Text editors The hammer-and-saw equivalent for creating web applications is the standard text editor. You can build all the program code used in this book using the text editor that’s already installed on your computer. You don’t have to buy any fancy software packages or maintain any upgrades. This section explains how to use the standard text editors that are found on most computers, based on the operating system you’re running. If you’re running Microsoft Windows If you’re running Microsoft Windows, you have the trusty Notepad application for creating and viewing standard text files. Notepad provides a bare-bones interface for typing text and saving it. Figure 3-1 shows an example of writing HTML code in a Notepad window. Notepad is nothing fancy — just your code in black and white.

54 BOOK 1 Getting Started with Web Programming Notepad works fine as a programming tool, but you’ll want to tweak a few of the settings before you start coding in Notepad, just to make things easier. DISABLING WORD WRAP In Notepad, you can define the width of the document you want to create, and then Notepad automatically starts a new line when you’ve reached that limit. This feature is handy for typing memos, but it causes issues when coding. Wrapping a line of code from one line to the next is generally not allowed in pro- gramming languages. All the code for a statement should be on the same line, unless you do some trickery to tell it otherwise. Another issue with word wrap is that the GoTo option in the Edit menu becomes disabled when word wrap is turned on. Because Notepad doesn’t show line num- bers, the GoTo feature is all you have to hunt for specific line numbers that error messages point out. GoTo is a crucial tool to have in the Notepad editor. To disable word wrap in Notepad, click the Format entry in the menu bar; then click the Word Wrap entry to ensure there is no check mark next to it. AVOIDING DEFAULT FILE EXTENSIONS By default, Notepad assumes you’re saving a text document and automatically appends a .txt file extension to the file. That doesn’t work with programming code, because most programs use a specific file extension to identify themselves (such as .html for HTML files or .php for PHP files). When you use the File ➪ Save As menu option in Notepad, you’ll need to be careful when saving your program file that the .txt file extension doesn’t get appended FIGURE 3-1: Using Microsoft Notepad to write HTML code.

Building a Development Environment CHAPTER 3 Building a Development Environment 55 to the end of the filename. To save a program file using Notepad, follow these steps: 1. Choose File ➪ Save As from the menu bar at the top of the editor. The Save As dialog box, shown in Figure 3-2, appears. 2. In the drop-down list at the top of the Save As dialog box, navigate to the folder where you want to save the program file. 3. From the Save As Type text box near the bottom of the Save As dialog box, select All Files (*.*). This prevents Notepad from appending the .txt file extension to your filename. 4. In the File Name field, enter the filename for your program file, including the file extension you want to use. 5. Click Save to save the program file. Your program file is properly saved in the correct format, with the correct filename, in the correct location. SEEING FILE EXTENSIONS In Microsoft Windows you use File Explorer to navigate the storage devices on your system to open files. Unfortunately, the default setup in File Explorer is to hide the file extension part of the filename (the part after the period) so that it doesn’t confuse novice computer users. FIGURE 3-2: The Microsoft Notepad Save As dialog box.

56 BOOK 1 Getting Started with Web Programming That can have the opposite effect for programmers, adding confusion when you’re trying to look for a specific file. You may use the same filename for multiple files with different extensions. Fortunately, you can easily change this default setting in Windows. Just follow these steps: 1. In Windows 8 or 10, open Settings. In Windows 7, open the Control Panel. 2. In Windows 8 or 10, type File Explorer Options in the search bar and press Enter. 3. Click the icon for the File Explorer Options tool that appears in the search results. 4. In Windows 7, click the File Explorer Options icon in the Control Panel. You may have to go to the Advanced view to see it. After you open File Explorer Options, the dialog box should look like Figure 3-3. 5. Click the View tab. 6. Remove the check mark from the Hide Extensions for Known File Types check box, as shown in Figure 3-4. 7. Click OK. Now you’ll be able to see the full filename, including the extension, when you look for your programs using File Explorer. FIGURE 3-3: The File Explorer Options dialog box in Windows.

Building a Development Environment CHAPTER 3 Building a Development Environment 57 SETTING THE DEFAULT APPLICATION Now that you can see the full filename of your program files in File Explorer, there’s just one more hurdle to cross. If you want to open your program files using Notepad by default, you’ll need to tell File Explorer to do that. Follow these steps: 1. Navigate to the program file, and right-click the filename. 2. In the menu that appears, select Open. The Open dialog box appears. 3. Select Notepad from the list of programs, and then select the check box to always open files of this type using the program. Now you’ll be able to double-click your program files in File Explorer to automatically open them in Notepad. If you’re running macOS If you’re running macOS (or one of the earlier Mac OS X versions), the text editor that comes standard is called TextEdit. The TextEdit application actually provides quite a lot of features for a standard text editor — it recognizes and allows you to edit a few different types of text files, including rich text files (.rtf) and HTML files. The drawback to TextEdit is that sometimes it can be too smart. Trying to save and edit an HTML file in TextEdit can be more complicated than it should be. By default, TextEdit will try to display the HTML tags as their graphical equivalents in the editor window, as shown in Figure 3-5. FIGURE 3-4: Removing the Hide Extensions for Known File Types check mark.

58 BOOK 1 Getting Started with Web Programming As you can see in Figure 3-5, TextEdit actually shows the text as the HTML tags format it instead of the actual HTML code. This won’t work for editing an HTML file, because you need to see the code text instead of what the code generates. There’s an easy way to fix that — just follow these steps: 1. Choose TextEdit ➪ Preferences. The Preferences dialog box, shown in Figure 3-6, appears. FIGURE 3-5: Using the default TextEdit settings to edit an HTML file. FIGURE 3-6: The Preferences dialog box in TextEdit.

Building a Development Environment CHAPTER 3 Building a Development Environment 59 2. On the New Document tab, in the Format section, select the Plain Text radio button. 3. In the Options section, remove the check mark from the following check boxes: • Correct Spelling Automatically • Smart Quotes • Smart Dashes • Smart Links 4. Click the Open and Save tab (see Figure 3-7). 5. In the When Opening a File section, check the Display HTML Files as HTML Code Instead of Formatted Text check box. 6. In the When Saving a File section, remove the check mark from the Add “.txt” File Extension to Plain Text Files check box. 7. Close the Preferences dialog box to save the settings. Now you’re all set to start editing your program code using TextEdit! FIGURE 3-7: The Open and Save tab of the Preferences dialog box.

60 BOOK 1 Getting Started with Web Programming If you’re running Linux The Linux environment was made by programmers, for programmers. Because of that, even the simple text editors installed by default in Linux distributions pro- vide some basic features that come in handy when coding. Which text editor comes with your Linux distribution usually depends on the desk- top environment. Linux supports many different graphical desktop environments, but the two most common are GNOME and KDE. This section walks through the default text editors found in each. THE GNOME EDITOR If you’re working in a GNOME desktop environment, the default text editor is gedit, shown in Figure 3-8. The gedit editor automatically saves program files as plain text format and doesn’t try to add a .txt file extension to filenames. There’s nothing special you need to do to dive into coding your programs using gedit. Plus, it has some advanced features specifically for programming that you would find in program editors (see the “Program editors” section later in this chapter). THE KDE EDITOR The default text editor used in the KDE graphical desktop environment is Kate, shown in Figure 3-9. FIGURE 3-8: The gedit editor used in Linux GNOME desktops.

Building a Development Environment CHAPTER 3 Building a Development Environment 61 Just like gedit, the Kate editor contains lots of programmer-friendly features right out of the box. Again, no special configuration is required before you can start editing your program code in Kate. Program editors The next step up from standard text editors is a family of tools called program editors. A program editor works just like a text editor, but it has a few additional built-in features that come in handy for programming. Here are some of the fea- tures that you’ll find in program editors: » Line numbering: Providing the line numbers off to the side of the window is a lifesaver when coding. When an error message tells you there’s a problem on line 1935, not having to count every line to get there helps! » Syntax highlighting: With syntax highlighting, the editor uses different colors for different parts of the program. Program keywords are displayed using different colors to help make them stand out from data in the code file. » Syntax error marking: Text that appears to be used as a keyword but that isn’t found in the code statement dictionary is marked as an error. This feature can be a time-saver by helping you catch simple typos in your program code. There are lots of commercial program editors, but some of the best program edi- tors are actually free. This section discusses some of the better free ones available for HTML, CSS, JavaScript, and PHP coding. FIGURE 3-9: The Kate editor used in Linux KDE desktops.

62 BOOK 1 Getting Started with Web Programming Notepad++ If you’re running Microsoft Windows, the Notepad++ tool is a great place to start. As its name suggests, it’s like Notepad, but better. You can download Note- pad++ from www.notepad-plus-plus.org. The main editing window is shown in Figure 3-10. The main interface for Notepad++ looks similar to Notepad, so there’s nothing different to get used to. By default, it shows line numbers along the left margin, as well as the type of file and the column location of the cursor at the bottom. Notepad++ recognizes the syntax for many different types of programming lan- guages, including HTML, CSS, JavaScript, and PHP. It highlights the keywords and will even match up opening and closing block statements. If you miss a closing block, Notepad++ will point that out. Scintilla and SciTE The Scintilla library (www.scintilla.org) is an open-source project to provide a programming text editor engine for use in any type of environment. Developers can embed the Scintilla editor into any type of application free of charge. The SciTE package is a desktop text editor tool that implements the Scintilla library. The SciTE package is available for Windows, macOS, and Linux plat- forms. You can download it from the Scintilla website for the Windows and Linux FIGURE 3-10: Notepad++.

Building a Development Environment CHAPTER 3 Building a Development Environment 63 platforms, and it’s available in the Apple Store for the macOS platform. Figure 3-11 shows the basic SciTE editor window in action. SciTE provides all the program editing features mentioned earlier. It recognizes the syntax of many different programming languages and can help you organize your code by marking and collapsing code sections (this comes in handy if you write long if-then statement sections). jEdit The jEdit program editor (www.jedit.org) is a little bit different from the other packages. It’s written in Java code, so you can run it in any platform that supports Java. That means you can use the exact same editor interface in Windows, macOS, or Linux! jEdit supports all the common features you’d expect from a program editor. Figure 3-12 shows the basic jEdit editor window. Because jEdit is a Java application, your desktop platform must have either a Java Runtime Environment (JRE) or Java Development Kit (JDK) package installed in order for it to work. You can download and install one from Oracle at www.oracle. com/technetwork/java/javase/downloads. Also, because jEdit runs as a Java application, you may find it slower than some of the native desktop packages such as Notepad++ or SciTE. FIGURE 3-11: SciTE.

64 BOOK 1 Getting Started with Web Programming Integrated development environments Moving up the ladder of tools, the laser-guided miter tool for program develop- ment is the integrated development environment (IDE). IDE packages provide every- thing you could possibly need to develop any size of web application. Here are some of the advanced features IDE packages provide: » Code completion: Start typing a code statement, and the package will provide a pop-up list of statements that match what you’re typing. It also shows what parameters are required and optional for the statement. » Code formatting: The IDE automatically indents code blocks to help make your code more readable. » Program execution: You can run your code directly from the editor window without having to jump out to a web browser. » Debugging: You can step through the program code line by line, watch how variables are set, and see whether any error messages are generated. » Project and file management: Most IDE packages allow you to group your application files into projects. This allows you to open a project and see just the files associated with that application. Some will even upload the project files to your web-hosting site for you, similar to what the graphical desktop tools do. Using an IDE tool is not for the faint of heart. Because of all the fancy features, learning how to use the IDE interface can be almost as complicated as learning the programming language! FIGURE 3-12: jEdit.

Building a Development Environment CHAPTER 3 Building a Development Environment 65 There are both commercial and open-source IDE packages available for the PHP environment. To give you a general idea of how IDE packages operate, this section walks through two of the more popular ones: Netbeans and Eclipse. Netbeans The Netbeans IDE package was originally developed by Sun Microsystems and released as an open-source IDE for its Java programming language environment (thus the “beans” part of the name). When Oracle acquired Sun, it maintained support for Netbeans, and continued development of it with updated releases. The Netbeans IDE now contains support for several different programming lan- guages besides Java by using additional plug-in modules. As you can guess, the reason I’m mentioning it here is because there’s a plug-in module for PHP. You can download the Netbeans editor with the PHP module already installed, making it easy to install. Just go to www.netbeans.org/downloads and click the Download button under the PHP category. When you start Netbeans, it will prompt you to start a new project, as shown in Figure 3-13. Netbeans contains project templates for HTML and JavaScript applications, as well as PHP applications. When you start a new PHP project, Netbeans automati- cally creates an index.php file as the main program file for the project. It even builds a rough template for your code. As you would expect from an IDE, when you FIGURE 3-13: The Netbeans project dialog box.

66 BOOK 1 Getting Started with Web Programming start typing a PHP function name, Netbeans opens a pop-up box that shows all the PHP functions that match what you’re typing, as shown in Figure 3-14. Not only does it show the code completion list, as you can see in Figure 3-14, but it also shows you the PHP manual definition of the function! This is cer- tainly a handy tool to have available if you plan on doing any large-scale PHP development. Eclipse The other big name in PHP IDE packages is the Eclipse PHP Development Tool (usually just called Eclipse PDT). Eclipse was also originally designed as a Java application IDE. Many open-source proponents didn’t trust Sun Microsystems maintaining the only IDE for Java, so they set out to develop their own. (The story goes that there was no intentional wordplay on the name Eclipse versus Sun Microsystems. If you can believe that, I may have a bridge to sell you.) Just like the Netbeans IDE, Eclipse evolved from a Java-only IDE to support many different programming languages via the use of plug-in modules. You can down- load the Eclipse PDT as an all-in-one package at www.eclipse.org/pdt. Just like the jEdit editor, Eclipse PDT is written as a Java application and requires that you have a JRE or JDK installed on your workstation (see “jEdit,” earlier in this chapter). FIGURE 3-14: The Netbeans code completion dialog box.

Building a Development Environment CHAPTER 3 Building a Development Environment 67 When you start Eclipse, a menu system appears, as shown in Figure 3-15. This allows you to easily change the IDE configuration, start a new project, or open an existing project. Eclipse has all the same features that Netbeans offers. Plus, it has one additional feature: Eclipse PDT contains the advanced PHP Debugger tool developed by Zend, the company that sponsors PHP. The Debugger tool can help point out errors in your PHP code immediately as you type, or it can debug your code as you run it in the Eclipse editor window. Figure 3-16 demonstrates Eclipse pointing out a PHP coding error I made in my code. Having an advanced PHP debugger at your fingertips can be a great time-saver when you’re developing large applications! Browser debuggers Before I finish this chapter, I want to mention one more tool that you have availa- ble when trying to troubleshoot web application issues. Most browsers today have a code-debugging feature either built in or easily installable. The browser debug- gers can help you troubleshoot HTML, CSS, and JavaScript issues in the web page you send to the client. Figure 3-17 shows the debugging console in the Microsoft Edge web browser after you press F12 to activate it. FIGURE 3-15: The Eclipse start menu.

68 BOOK 1 Getting Started with Web Programming Browser debuggers can show you exactly where something has gone wrong in the HTML or CSS code. They’re also invaluable when working with JavaScript applications. FIGURE 3-16: The PHP debugger in action in Eclipse. FIGURE 3-17: The Microsoft Edge web browser debugging a web page.

Building a Development Environment CHAPTER 3 Building a Development Environment 69 When you’re developing web applications, it’s crucial that you test, do some more testing, and then test again. Testing your application in every possible way your website visitors will use it is the only way to know just what to expect. Things are getting better, but different browsers still may handle HTML, CSS, and even JavaScript code differently. Nowhere is this more evident than when errors occur. When an error occurs in HTML or CSS code, the browser doesn’t display any type of error message. Instead, it tries to fix the problem on its own so it can display the web page. Unfortunately, not all browsers fix code the same way. If you run into a situation where your web page looks different on two different browsers, most likely you have some type of HTML or CSS code issue that the browsers are interpreting differently.

2 HTML5 and CSS3

Contents at a Glance CHAPTER 1: The Basics of HTML5                                 73 Diving into Document Structure                              73 Looking at the Basic HTML5 Elements                         81 Marking Your Text                                          85 Working with Characters                                    90 Making a List (And Checking It Twice)                          92 Building Tables                                            96 CHAPTER 2: The Basics of CSS3                                   103 Understanding Styles                                      103 Styling Text                                               112 Working with the Box Model                                119 Styling Tables                                             121 Positioning Elements                                      125 CHAPTER 3: HTML5 Forms                                        135 Understanding HTML5 Forms                               135 Using Input Fields                                         138 Adding a Text Area                                        146 Using Drop-Down Lists                                     147 Enhancing HTML5 Forms                                   149 Using HTML5 Data Validation                               154 CHAPTER 4: Advanced CSS3                                       157 Rounding Your Corners                                    157 Using Border Images                                      159 Looking at the CSS3 Colors                                 162 Playing with Color Gradients                                164 Adding Shadows                                          166 Creating Fonts                                            168 Handling Media Queries                                    171 CHAPTER 5: HTML5 and Multimedia                            177 Working with Images                                      177 Playing Audio                                             185 Watching Videos                                          190 Getting Help from Streamers                               194

CHAPTER 1 The Basics of HTML5 73 The Basics of HTML5 T he core of your web application is the HTML5 code you create to present the content to your site visitors. You need an understanding of how HTML5 works and how to use it to best present your information. This chapter describes the basics of HTML5 and demonstrates how to use it to create web pages. Diving into Document Structure The HTML5 standard defines a specific structure that you must follow when defining your web pages so that they appear the same way in all browsers. This structure includes not only the markups that you use to tell browsers how to dis- play your web page content, but also some overhead information you need to provide to the browser. This section explains the overall structure of an HTML5 program, and tells you what you need to include to ensure your clients’ browsers know how to work with your web pages correctly. Elements, tags, and attributes An HTML5 document consists of one or more elements. An element is any object contained within your web page. That can be headings, paragraphs of text, form Chapter 1 IN THIS CHAPTER » Looking at the HTML5 document structure » Identifying the basic HTML5 elements » Formatting text » Using special characters » Creating lists » Working with tables

74 BOOK 2 HTML5 and CSS3 fields, or even multimedia clips. Your browser works with each element individu- ally, positioning it in the browser window and styling it as directed. You define elements in your web page by using tags. A tag identifies the type of element so the browser knows just how to handle the content it contains. The HTML5 specification defines two types of elements: » Two-sided elements: Two-sided elements are the more common type of element. A two-sided element contains two parts: an opening tag and a closing tag. The syntax for a two-sided element looks like this: <element>content</element> The first element tag is the opening tag. It contains the element name, surrounded by the less-than symbol (<) and greater-than symbol (>), and defines the start of the element definition. The second tag is the closing tag; it defines the end of the element definition. It points to the same element name, but the name is preceded by a forward slash (/). The browser should handle any content between the two tags as part of the element content. For example, the HTML5 h1 element defines a heading like this: <h1>This is a heading</h1> The element instructs the browser to display the text This is a heading using the font and size appropriate for a heading on the web page. It’s up to the browser to determine just how to do that. » One-sided elements: One-sided elements don’t contain any content and usually define some type of directive for the browser to take in the web page. For example, the line break element instructs the browser to start a new line in the web page: <br> Because there’s no content, there’s no need for a closing tag. The older XHTML standard requires that one-sided tags include a closing forward slash character at the end of the tag, such as <br/>. This isn’t required by HTML5, but it’s supported for backward compatibility. It’s very common to still see that format used in HTML5 code. Besides the basic element definition, many elements also allow you to define attributes to apply to the element. Attributes provide further instructions to the browser on how to handle the content contained within the element. When you define an attribute for an element, you must also assign it a value.

The Basics of HTML5 CHAPTER 1 The Basics of HTML5 75 You include attributes and their values inside the opening tag of the element, like this: <element attribute="value">content</element> You can define more than one attribute/value pair for the element. Just separate them using a space in the opening tag: <element attribute1="value1" attribute2="value2"> Attributes are commonly used to apply inline styles to elements: <h1 style="color: red">Warning!!</h1> The style attribute shown here defines additional styles the browser should apply to the content inside the element. In this example, the browser will change the font color of the text to red. Document type Every web page must follow an HTML or XHTML document standard so the browser can parse it correctly. The very first element in the web page code is the markup language standard your document follows. This element, called the document type, is crucial, because the browser has to know what standard to follow when parsing the code in your web page. You define the document type using the <!DOCTYPE> tag. It contains one or more attributes that define the markup language standard. Prior versions of HTML used a very complicated format for the document type definition, pointing the browser to a web page on the Internet that contained the standard definition. Fortunately, the HTML5 standard reduced that complexity. To define an HTML5 document, you just need to include the following line: <!DOCTYPE html> When the browser sees this line at the start of your web page code, it knows to parse the elements using the HTML5 standard. If you omit the <!DOCTYPE> tag, the browser will still attempt to parse and pro- cess the markup code. However, because the browser won’t know exactly which standard to follow, it follows a practice known as quirks mode. In quirks mode, the browser follows the original version of the HTML standard, so newer elements won’t be rendered correctly.

76 BOOK 2 HTML5 and CSS3 Page definition To create an HTML5 web page, you just define the different elements that appear on the page. The elements fit together as part of a hierarchy of elements. Some ele- ments define the different sections of the web page, and other elements contained within those sections define content. The html element is at the top of the hierarchy. It defines the start of the entire web page. All the other elements contained within the web page should appear between the <html> opening and </html> closing tags: <!DOCTYPE html> <html> web page content </html> Most Web pages define at least two second-level elements, the head and the body: <html> <head> head content </head> <body> body content </body> </html> The head element contains information about your web page for the browser. Con- tent contained within the head element doesn’t appear on the web page, but it directs things behind the scenes, such as any files the browser needs to load in order to properly display the web page or any programs the browser needs to run when it loads the web page. One element that’s commonly found in the head element content is the title, which defines the title of your web page: <head> <title>My First Web Page</title> </head> The web page title isn’t part of the actual web page, but it usually appears in the browser’s title bar at the top of the browser window or in the window tab if the browser supports tabbed browsing. The body element contains the elements that appear in the web page. This is where you define the content that you want your site visitors to see. The body element

The Basics of HTML5 CHAPTER 1 The Basics of HTML5 77 should always appear after the head element in the page definition. It’s also important to close the body element before closing out the html element. Follow these steps to create and test your first web page: 1. Open the editor, program editor, or integrated development environ- ment (IDE) package of your choice. See Book 1, Chapter 3, for ideas on which tool to use. 2. Enter the following code into the editor window: <!DOCTYPE html> <html> <head> <title>My First Web Page</title> </head> <body> This is text inside the web page. </body> </html> 3. Save the code to the DocumentRoot folder of your web server, naming it mytest.html. If you’re using the XAMPP server in Windows, the folder is c:\xampp\htdocs. For macOS, it’s /Applications/xampp/htdocs. 4. Start the XAMPP servers. 5. Open the browser of your choice, and enter the following URL: http://localhost:8080/mytest.html Note that you may need to change the 8080 port number specified in the URL to match your XAMPP Apache server set up (see Book 1, Chapter 2). Figure 1-1 shows the web page that this code produces. The head element defines the web page title, which as shown in Figure 1-1, appears in the web browser title bar. The body element contains a single line of text, which the browser renders inside the browser window area. You may notice that other than the special <!DOCTYPE> tag, all the other HTML tags I used are in lowercase. HTML5 ignores the case of element tags, so you can use uppercase, lowercase, or any combination of the two for the element names in the tags. The older XHTML standard requires all lowercase tags, so many web developers have gotten into the habit of using lowercase for tags, and more often than not, you’ll still see HTML5 code use all lowercase tag names.

78 BOOK 2 HTML5 and CSS3 Page sections Web pages these days aren’t just long pages of content. They contain some type of formatting that lays out the content in different sections, similar to how a news- paper presents articles. In a newspaper, usually there are two or more columns of content, with each column containing one or more separate articles. In the old days, trying to create this type of layout using HTML was somewhat of a challenge. Fortunately, the HTML5 standard defines some basic elements that make it easier to break up our web pages into sections. Table 1-1 lists the HTML5 elements that you use to define sections of your web page. FIGURE 1-1: The output for the sample web page. TABLE 1-1 HTML5 Section Elements Element Description article A subsection of text contained within a section aside Content related to the main article, but placed alongside to provide additional information div A grouping of similarly styled content within an article footer Content that appears at the bottom of the web page header Content that appears at the top of the web page nav A navigation area allowing site visitors to easily find other pages or related websites section A top-level grouping of articles

The Basics of HTML5 CHAPTER 1 The Basics of HTML5 79 Although HTML5 defines the sections, it doesn’t define how the browser should place them in the web page. That part is left up to CSS styling, which I talk about in Chapter 2 of this minibook. When you combine the HTML5 section elements with the appropriate CSS3 styl- ing, you can create just about any look and feel for your web pages that you want. Although there’s no one standard, there are some basic rules that you can follow when positioning sections in the web page. Figure 1-2 shows one common layout that I’m sure you’ve seen used in many websites. Just about every web page has a heading section at the top of the page that iden- tifies it to site visitors. After that, a middle section is divided into three separate areas. On the left side is often a navigation section, providing links to other pages in the website. On the right side is often additional information or, in some cases, advertisements. In the middle of the middle section is the meat of the content you’re presenting to your site visitors. Finally, at the bottom of the web page is a footer, often identifying the copyright information, as well as some basic contact information for the company. The div element is a holdout from previous versions of HTML. If you need to work with older versions of HTML, instead of using the named section elements, you need to use the <div> tag, along with the id attribute to define a specific name for the section: <div id="header"> content for the heading </div> The CSS styles refer to the id attribute value to define the styles and positioning required for the section. You can still use this method in HTML5. Designers often use the div element to define subsections within articles that need special styling. FIGURE 1-2: A basic web page layout using HTML5 section elements.

80 BOOK 2 HTML5 and CSS3 A WORD ABOUT WHITE SPACE Quite possibly the most confusing feature in HTML is how it uses white space. The term white space refers to spaces, tabs, consecutive spaces, and line breaks within the HTML code. By default, when a browser parses the HTML code, it ignores any white space between elements. So, these three formats all produce the same results: <title> My First Web Page </title> <title>My First Web Page </title> <title>My First Web Page</title> It's completely up to you which format to use for your programs, but I recommend choosing a format and sticking to it. That’ll make reading your code down the road easier, for you or anyone else. COMMENTING YOUR CODE Every programming language allows you to embed comments inside the code to help with documenting what’s going on. HTML is no different. HTML allows you to insert text inside the HTML document that will be ignored by the browser as it parses the text. To start a comment section in HTML, you use the following symbol: <!-- You can then enter as little or as much text as you need to properly document what's going on in your code. When the comment text is complete, you have to close the comment section using the following symbol: --> You can place anything between the opening and closing comment tags, including HTML code, and the browser will ignore it. However, be careful what you say in your comments, because they can be read by anyone who downloads your web page!

The Basics of HTML5 CHAPTER 1 The Basics of HTML5 81 Now that you know how to define different sections of the web page, the next sec- tion discusses how to add content to them. Looking at the Basic HTML5 Elements After you define one or more sections in your web page, you’re ready to start defining content. Adding content to a web page is sort of like working on a car assembly line. You define each piece of the web page separately, element by ele- ment. It’s up to the browser to assemble the pieces to create the finished web page. This section covers the main elements that you’ll use to define content in your web page. Headings Normally, each new section of content in a web page will use some type of head- ing to make it stand out. Research shows that the first thing site visitors usually do when visiting a web page is to scan the main headings on the page. If you can’t attract their attention with your section headings, you may quickly lose them. HTML5 uses the h element to define text for a heading. It defines six different levels of headings. Each heading level has a separate tag: <h1>A level 1 heading</h1> <h2>A level 2 heading</h2> <h3>A level 3 heading</h3> <h4>A level 4 heading</h4> <h5>A level 5 heading</h5> <h6>A level 6 heading</h6> Although there are six levels of headings in the HTML5 standard, most sites don’t use more than two or three. The client browser determines the font, style, and size of the text it uses for each heading level. Figure 1-3 shows how the Chrome web browser interprets the six levels of headings.

82 BOOK 2 HTML5 and CSS3 The browser displays each heading level with a decreasing font size. By the time you get to the sixth heading level, it’s pretty hard to tell the difference between the heading and normal text on the web page! Text groupings There are several HTML5 elements that allow you to group text together into what are called block-level elements. The browser treats all of the content defined within the opening and closing tags of a block-level element as a single group. This allows you to use CSS to style or position the entire block of content as one piece, instead of having to style or position each element individually. You can group headings together using a new feature in the HTML5 standard called a heading group, using the hgroup element: <hgroup> <h1>This is the main heading.</h1> <h2>This is the subheading.</h2> </hgroup> The heading group doesn’t change the h1 or h2 elements, but it provides a way for the browser to interpret the two headings as a single element for styling and positioning. This allows you to use CSS styles to format them as a single block so they blend together like a main heading and a subheading. A web page consisting of sentences just strung together is boring to read and won’t attract very many site visitors (or may just put them to sleep). In print, we FIGURE 1-3: Displaying all six heading levels in the Chrome web browser.

The Basics of HTML5 CHAPTER 1 The Basics of HTML5 83 group sentences of common thoughts together into paragraphs. You do the same thing in your web page content by using the p element: <p>This is one paragraph of text. The paragraph contains two sentences of content.</p> Notice that the p element uses an opening tag (<p>) and a closing tag (</p>) to mark the beginning and end of the grouped text. The browser treats all the text inside the p element as a single element. When you group the content together, you can apply styles and positioning to the entire block. Be careful with the p element, though. The rules of white space that apply to HTML tags also apply to text inside the p element. The browser won’t honor line breaks, tabs, or multiple spaces. So, if you have code like this: <p> This is one line. This is another line. </p> It will appear in the web page like this: This is one line. This is another line. All the extra spaces and the line break are removed from the content. Also, notice that the web browser adds a space between the two sentences. If you want to preserve the formatting of the text in the web page, use the pre element. The pre element allows you to group preformatted text. The idea behind preformatted text is that it appears in the web page exactly as you enter it in the code file: <pre> This is one line. This is another line. </pre> The browser will display the text in the web page exactly as it appears in the HTML5 code. Yet another method of grouping text is the blockquote element. The blockquote element is often used to quote references within a paragraph. The browser will

84 BOOK 2 HTML5 and CSS3 indent the text contained within the blockquote separate from the normal para- graph text: <p>The only poem that I learned as a child was:</p> <blockquote>Roses are red, violets are blue. A face like yours, belongs in the zoo.</blockquote> <p>But that's probably not considered classic poetry.</p> This feature helps you embed any type of text within content, not just quotes. Breaks Because HTML doesn’t recognize the newline character in text, there’s a way to tell the browser to start a new line in the web page when you need it. The single- sided br element forces a new line in the output: <p> This is one line. <br> This is a second line. </p> Now the output in the web page will appear as: This is one line. This is a second line. Another handy break element is the hr element. It displays a horizontal line across the width of the web page section. <h1>Section 1</h1> <p>This is the content of section 1.</p> <hr> <h1>Section 2</h2> <p>This is the content of section 2.</p> The horizontal line spans the entire width of the web page block that contains it, as shown in Figure 1-4. Sometimes that’s a bit awkward, but you can control the width of the horizontal line a bit by enclosing it in a section and adding some CSS styling.

The Basics of HTML5 CHAPTER 1 The Basics of HTML5 85 Marking Your Text The opposite of block-level elements are text-level elements. Text-level elements allow you to apply styles to a section of content within a block. This section shows you the text-level elements you can apply to the content in your web page. Formatting text The text-level elements apply predefined formats to text without the need for CSS styling. The most popular of the text-level elements are the b and i elements, which apply the bold and italic styles, respectively: <p>I <i>wanted</i> the <b>large</b> drink size.</p> Text-level elements are also called inline, because they appear in the same line as the content. You can embed text-level elements to apply more than one to the same text: <p>I wanted the <b><i>large</i></b> drink size.</p> When applying two or more text-level elements to text, make sure you close the tags in the opposite order that you open them. HTML5 supports lots of different text-level elements for using different styles of text directly, without the help of CSS. Table 1-2 lists the text-level elements available in HTML5. FIGURE 1-4: Using the hr element in a web page.

86 BOOK 2 HTML5 and CSS3 As you can see in Table 1-2, you have lots of options for formatting text without even having to write a single line of CSS code! Using hypertext In Book 1, Chapter 1, I mention that hyperlinks are the key to web pages. Hyper- links are what tie all the individual web pages in your website together, allowing site visitors to jump from one page to another. TABLE 1-2 HTML5 Text-Level Elements Element Description abbr Displays the text as an abbreviation b Displays the text as boldface cite Displays the text as a citation (often displayed as italic) code Displays the text as program code (often displayed with a fixed-width font) del Displays the text as deleted (often displayed with a strikethrough font) dfn Displays the text as a definition term (often displayed as italic) em Displays the text as emphasized (often displayed as italic) i Displays the text as italic ins Displays the text as inserted (often displayed with an underline font) kbd Displays the text as typed from a keyboard (often as a fixed-width font) mark Displays the text as marked (often using highlighting) q Displays the text as quoted (often using quotes) samp Displays the text as sample program code (often displayed with a fixed font) small Displays the text using a smaller font than normal strong Displays the text as strongly emphasized (often using boldface) sub Displays the text as subscripted sup Displays the text as superscripted time Displays the text as a date and time value var Displays the text as a program variable (often using italic)

The Basics of HTML5 CHAPTER 1 The Basics of HTML5 87 The element that creates a hyperlink is the anchor text-level element. At first, that may sound somewhat counterintuitive — you’d think an anchor would keep you in one place instead of sending you someplace else. But think of it the other way around: The anchor element is what anchors another web page to your current web page. Following the anchor takes you to the other web page! Formatting a hyperlink Because the anchor element is a text-level element, you use it to mark text inside a block. That text then becomes the hyperlink. You add an anchor element using the <a> tag. The anchor element is two-sided, so it has both an opening tag (<a>) and a closing tag (</a>). The text inside the opening and closing tags becomes the hyperlink text. A few different attributes are available for the <a> tag, but the most important one is the href attribute. The href attribute specifies where the hyperlink takes your site visitors: <a href="http://www.google.com">Click here to search.</a> When a site visitor clicks the hyperlink, the browser automatically takes the visi- tor to the referenced web page in the same browser window. If you prefer, you can also specify the target attribute, which specifies how the browser should open the new web page. Here are your options for the target attribute: » _blank: Opens the specified page in a new tab or window. » _self: Opens the specified page in the current tab or window. This is the default behavior in HTML5, so it’s not necessary to add it unless you want to for clarification in your code. » _parent: Opens the specified page in the parent window of a frame embed- ded within the window. Embedded frames aren’t popular anymore in HTML5, so this option is seldom used. » _top: Opens the specified page in the main window that contains the frame embedded within other frames. This is seldom used. You use the target attribute like this: <a href="http://www.google.com" target="_blank">Click here to search.</a> There’s no set rule regarding how to handle opening new web pages, but generally it’s a good idea to open other pages on your own website in the same browser tab or window, but open remote web pages in a new tab or window. That way your site visitors can easily get back to where they left off on your website if needed.

88 BOOK 2 HTML5 and CSS3 Displaying a hyperlink When you specify a hyperlink in the text, the browser tries to make it stand out from the rest of the text, as shown in Figure 1-5. By default, browsers will display the anchor element text using a different format than the rest of the block text: » Unvisited links appear underlined in blue. » Visited links appear underlined in purple. » Active links are when you click an unvisited or visited link with your mouse. When you click your mouse, the link becomes active and appears underlined in red. You can change these formats to your own liking using CSS styles, as I explain in the next chapter. Specifying a hyperlink The href attribute defines the location of the web page that you want the browser to open for your site visitor, but there are a few different formats you can use to specify that location: FIGURE 1-5: Displaying hypertext in a document.

The Basics of HTML5 CHAPTER 1 The Basics of HTML5 89 » A different location on the same document » A separate web page in the same website » A web page in a remote website You can use hyperlinks to force the browser to jump to a specific location inside the same web page. This is handy for long web pages that require lots of scrolling to get to sections at the bottom of the page. To use this method, you must first identify the locations in the web page by applying the id attribute to a block-level element, such as a heading or a paragraph element: <h1 id="chicago">Chicago News</h1> To create an anchor element to jump to that section, you use the id attribute value, preceded by a number sign or hash mark (#): <a href="#chicago">See Chicago News</a> When the site visitor clicks the link, the browser automatically scrolls to place the section in the viewing area of the window. When jumping to another web page on the same server, you don’t need to include the full http:// address in the href attribute. Instead, you can specify a relative address. The relative address isn’t where your uncle lives; it’s shorthand for find- ing another file on the same web server. If the file is in the same folder on the same server, you can just specify the filename: <a href="store.html">Shop in our online store.</a> You can also place files in a subfolder under the location of the current web page. To do that, specify the subfolder without a leading slash: <a href="store/index.php">Shop in our online store.</a> In both cases, the browser will send an HTTP request to retrieve the file to the same server where it downloads the original page from. To specify a web page on a remote website, you’ll need to use an absolute address. The absolute address specifies the location using the Uniform Resource Locator (URL), which defines the exact location of a file on the Internet using the follow- ing format: protocol://host/filename

90 BOOK 2 HTML5 and CSS3 The protocol part specifies the network protocol the browser should use to download the file. For web pages, the protocol is either http (for unencrypted connections) or https (for encrypted connections). The host part specifies the host name, such as www.google.com for Google. The filename part specifies the exact folder path and filename to reach the file on the server. If you omit the file- name, the remote web server will offer the default web page in the folder (usually, index.html). You can also specify local filenames using an absolute path address. Just pre- cede the folder name with a forward slash (/). The leading forward slash tells the server to look for the specified folder at the DocumentRoot location of the web server, instead of in a subfolder from the current location. Working with Characters No, I’m not talking about Disneyland. I’m talking about the letters, numbers, and symbols that appear on your web pages. Humans prefer to see information as letters, words, and sentences, but computers prefer to work with numbers. To compensate for that, programmers developed a way to represent all characters as number codes so computers can handle them. The computer just needs a method of mapping the number codes to characters. Character sets The character-to-number mapping scheme is called a character set. A character set assigns a unique number to every character the computer needs to represent. In the early days of computing in the United States, the American Standard Code for Information Interchange (ASCII) became the standard character set for mapping the English-language characters and symbols in computers. As the computing world became global, most programs needed to support more than just the English language. The Latin-1 and ISSO 8859-1 character sets became popular, because they include characters for European languages. But that still didn’t cover everything! Because it’s supported worldwide, the HTML5 standard required more than just European-language support. The Unicode character set supports characters from all languages of the world; plus, it has room for expansion. Because of its huge size, though, a subset of Unicode, called UTF-8, became more popular. UTF-8 also supports all languages, but with a smaller footprint; it has become the standard for HTML5.

The Basics of HTML5 CHAPTER 1 The Basics of HTML5 91 Although the HTML5 standard specifies a default character set, it’s a good idea to specify the character set in your web pages so that you’re sure the client browser is using the same character set to interpret your content. You do that using the meta element. Because the meta element provides additional information about your web page, you have to place it inside the head element section of the HTML code. The meta element uses the single-sided <meta> tag. To specify the character set in HTML5 you use the following format: <meta charset="UTF-8"> If your HTML code requires a different character set, you specify it here. The <meta> tag allows you to specify other features of your web page to the browser so that it knows how to process the body of the web page, and identify the content of the web page to servers that automatically scan your web pages for search engines. I talk some more about the <meta> tag in Book 4, Chapter 4. Special characters The UTF-8 character set supports lots of fancy characters that you won’t find on your keyboard, such as the copyright symbol (©), the cent symbol (¢), and the degree symbol (°). These are commonly referred to as special characters. You can use special characters in your web page content because they’re valid UTF-8 characters. You just need to use a different way of specifying them. Instead of typing these characters using your keyboard, you use a code to specify them. HTML5 uses two types of codes to specify special characters: » Numeric character reference: The numeric character reference uses the UTF-8 numeric code assigned to the character. Place an ampersand (&) and a hash (#) in front of the character number, and a semicolon (;) after the character number. For example, to display the copyright symbol, use the following: &#169; » Character entity reference: The character entity reference uses a short name to represent the character. Place an ampersand (&) in front of the character short name, and a semicolon (;) after the character short name: &copy;

92 BOOK 2 HTML5 and CSS3 Both methods work equally well, so use whichever method you’re most comforta- ble with. The list of special characters available in UTF-8 is pretty long, so I won’t include them here. If you search the web for UTF-8 characters, you’ll find plenty of websites that show the mappings between the UTF-8 numbers and character short names. Making a List (And Checking It Twice) The world is full of lists — to-do lists, wish lists, grocery lists . . . the list just goes on and on. It’s no surprise that the HTML5 developers created a way to easily present lists in web pages. There are three basic types of lists available for you to use in HTML5: unordered lists, ordered lists, and description lists. This section covers how to use each type of list in your web pages. Unordered lists Some lists have no specific order to the items contained in them (like a grocery list). In the word-processing world, these are called bulleted lists, as each item in the list is preceded by a generic bullet icon. In HTML5, they’re referred to as unordered lists. The HTML5 standard uses the ul element to display an unordered list using bullets. The ul element is a two-sided element, so you use the <ul> tag to open the list and the </ul> tag to close the list. You must identify each item in the list using the li element. The li element is also a two-sided element, so you use the <li> tag to open each item description and the </li> tag to close it. The overall structure for an unordered list looks like this: <ul> <li>item1</li> <li>item2</li> <li>item3</li> </ul> Because HTML5 doesn’t care about white space in code, it’s common to indent the list items in the definition as shown here, to help make it easier to read the code. However, indenting isn’t necessary. Figure 1-6 shows the default way most browsers display unordered lists in the web page.

The Basics of HTML5 CHAPTER 1 The Basics of HTML5 93 The bullet marks are fairly generic, similar to what you’d see in most word- processing documents. Fortunately, you can spice things up a little using CSS by defining different types of bullets to use. Ordered lists Some lists have a specific order in which the items should appear and be processed. In word-processing, these lists are called numbered lists. In HTML5, they’re called ordered lists. The HTML5 standard uses the ol element to display an ordered list. The ordered list also uses the li element to mark the individual items contained in the list: <ol> <li>Walk the dog.</li> <li>Eat breakfast.</li> <li>Read the paper.</li> <li>Get ready for work.</li> </ol> By default, browsers assign each item in the list a number, starting at 1, and increasing for each list item, as shown in Figure 1-7. FIGURE 1-6: Displaying an unordered list.

94 BOOK 2 HTML5 and CSS3 If you want the list to be in reverse order, add the reversed attribute: <ol reversed> If you’d like to start at a different number, add the start attribute, and specify the starting number as the value: <ol start="10"> If you don’t want to use numbers, there are a few other options available with the type attribute. Table 1-3 shows the different ordered list types available. FIGURE 1-7: The display default for an ordered list. TABLE 1-3 Ordered List Types Type Description 1 Numerical list (the default) A Alphabetical list, using uppercase a Alphabetical list, using lowercase I Roman numerals, using uppercase i Roman numerals, using lowercase

The Basics of HTML5 CHAPTER 1 The Basics of HTML5 95 As you can probably guess, you can also embed lists within lists: <ol type="I"> <li>First item</li> <ol type="A"> <li>Item 1, Subitem 1</li> <li>Item 1, Subitem 2</li> </ol> <li>Second item</li> <ol type="A"> <li>Item 2, Subitem 1</li> <li>Item 2, Subitem 2</li> </ol> </ol> When using embedded lists, it’s very important to match up the opening and clos- ing tags for each item in the list, as well as the lists themselves. Any mismatches will confuse the browser and will cause unpredictable results. Description lists Another common use of lists is to provide descriptions for terms, such as a glos- sary. The HTML5 standard uses description lists to provide an easy way to do that. Description lists use the dl element to define the list but use a slightly different method of defining the items in the list than the unordered and ordered lists. The description list breaks the items into terms and descriptions. You define a term using the dt two-sided element and the associated description using the dd two- sided element. Because it’s important to match the correct term with the correct description, be careful to alternate between the two in the list definition: <dl> <dt>Baseball</dt> <dd>A game played with bats and balls</dd> <dt>Basketball</dt> <dd>A game played with balls and baskets</dd> <dt>Football</dt> <dd>A game played with balls and goals</dd> </dl> Figure 1-8 shows how this table is rendered in the browser.

96 BOOK 2 HTML5 and CSS3 The browser automatically separates the terms from the descriptions in the dis- play, making it easier to tell which is which. Building Tables No, don’t get out your hammer and saw. I’m talking about data tables. The world is filled with data, and a very common use of web pages is to present that data to the world. This section describes the data table features built into HTML5 that you can use to easily present your data. The general process for creating a table involves three steps: 1. Define the table element. 2. Define the table rows and columns. 3. Define the table headings. This section walks through each of these steps to show you how to create tables for your data. Defining a table To add a table to your web page, you start out with the HTML5 table element. The table element is a two-sided element, so it opens with a <table> tag and closes with a </table> tag: FIGURE 1-8: Displaying a description list.

The Basics of HTML5 CHAPTER 1 The Basics of HTML5 97 <table> </table> That creates the table, but it’s not too exciting because there’s nothing in it yet. The next step is to define cells for the data. Prior versions of HTML added attributes to the <table> tag to define the table appearance, such as the border type, cell spacing, and width. HTML5 has dropped all these attributes, so avoid using them if possible. You should now define those features using CSS styles instead. Defining the table’s rows and columns If you’re familiar with standard spreadsheet software, such as Microsoft Excel or Apple Numbers, you’re used to defining tables using cells, referenced by letters (for the columns) and numbers (for the columns). Unfortunately, HTML5 uses a different method for defining table cells. To build the cells in a table you must define two separate elements: » A row in the table: You use the tr element to define the row inside the table. The tr element is a two-sided element, so you use the <tr> tag to open a row and the </tr> tag to close the row. » The cell inside the row: Inside the row you use the td element to define individual cells. Again, the td element is two-sided, so you use the <td> tag to open a cell and the </td> tag to close a cell. So, with all that info, you can create your first table. Just follow these steps: 1. Open your text editor, program editor, or IDE package and type the following code: <!DOCTYPE html> <html> <head> <title>My First Table</title> </head> <body> <h1>Bowling Scores</h1> <table>

98 BOOK 2 HTML5 and CSS3 <tr> <td>Bowler</td> <td>Game 1</td> <td>Game 2</td> <td>Game 3</td> <td>Average</td> </tr> <tr> <td>Rich</td> <td>100</td> <td>110</td> <td>95</td> <td>102</td> </tr> <tr> <td>Barbara</td> <td>110</td> <td>105</td> <td>103</td> <td>106</td> </tr> <tr> <td>Katie</td> <td>120</td> <td>125</td> <td>115</td> <td>120</td> </tr> <tr> <td>Jessica</td> <td>115</td> <td>120</td> <td>120</td> <td>118</td> </tr> </table> </body> </html> 2. Save the file in the XAMPP DocumentRoot folder as mytable.html. 3. Make sure the XAMPP servers are running.

The Basics of HTML5 CHAPTER 1 The Basics of HTML5 99 4. Open your browser and enter the following URL: http://localhost:8080/mytable.html You may need to change the 8080 port number in the URL to match the Apache web server in your setup. When you display the web page it should look like Figure 1-9. By default, the table doesn’t contain any gridlines, but you can change that using CSS, as you see in the next chapter. Also, the table column headings appear just like the data rows. You fix that next. Defining the table headings You can apply special formatting to table headings without the use of CSS by using the th element instead of the td element for the heading cells: <tr> <th>Bowler</th> <th>Game 1</th> <th>Game 2</th> <th>Game 3</th> <th>Average</th> </tr> FIGURE 1-9: Displaying the table in Chrome.

100 BOOK 2 HTML5 and CSS3 The th element causes the browser to display the heading cells using a bold font. Often, in tables, you’ll run into situations where a data cell must span two or more columns or rows. You can emulate that in your HTML5 tables using the rowspan and colspan attributes in the <td> tag. To span two or more rows in a single data cell, just add the rowspan attribute, and specify the number of rows to span. For example, if all the bowlers had the same score in the first game, you could do this: <tr> <td>Rich</td> <td rowspan=4>100</td> <td>110</td> <td>95</td> <td>102</td> </tr> Now the second cell will span the next four rows in the table. Remember, though, when entering data for the other three rows, you must omit the first cell of data, because the first row will take up that space, as shown in Figure 1-10. FIGURE 1-10: Using the rowspan attribute in a table.

The Basics of HTML5 CHAPTER 1 The Basics of HTML5 101 Likewise, if one of the bowlers had the same score in all three games, you could use the colspan attribute to combine all three columns into one cell: <tr> <td>Katie</td> <td colspan=3>120</td> </tr> Now the second cell in the row will span all three data columns for that row, as shown in Figure 1-11. FIGURE 1-11: Using the colspan attribute in a table.

CHAPTER 2 The Basics of CSS3 103 The Basics of CSS3 I n the last chapter, I explain how to use HTML5 to display content on your web page. However, when you just use HTML5, things look pretty boring! This chapter shows you how to incorporate style into your web pages to help liven things up (even if you’re not an artist). First, I explain how to use CSS style sheets to style elements contained in the web page. Then I show you how to work with styles to change the color and font of text, make fancier lists, and spruce up your tables within your web pages. Finally, I explain how to work with the CSS positioning features to arrange your content in an appealing manner on the page. Understanding Styles When you specify an HTML5 element in your web page, the web browser decides just how that element should look. Browsers use a default styling to determine the difference between the text in an h1 element and the text in a blockquote element. Fortunately, another standard is available to work with HTML5 that helps you make your web pages unique. Back in Book 1, Chapter 1, I explain how Cascading Style Sheets (CSS) work to style HTML5 content on the web page. That’s the key to making your website stand out from the crowd! Chapter 2 IN THIS CHAPTER » Defining styles » Formatting text » Using the box model » Sprucing up your tables » Positioning elements where you want them

104 BOOK 2 HTML5 and CSS3 The CSS standard specifies ways to define the color, size, and font type of text that appears on web pages. It also provides some styles for adding background colors and images and styling other types of elements on the web page. The CSS standard has evolved some over the years. At the time of this writing, it’s currently at version 3 — you’ll often see it referred to as CSS3, and that’s what I call it in this book. Now you’re ready to take a deeper dive into just how to use CSS3 in your web applications. This section walks through how CSS3 works and how you can use it to make your web pages look good. Defining the rules of CSS3 CSS3 uses rules to define how the browser should display content on the web page. Each rule consists of two parts: a selector that defines what elements the rule applies to and one or more declarations that define the style to apply. The format of the CSS3 rule looks like this: selector {declaration; declaration; ...} In the rule definition, there are five ways to define the selector: » Element type: The rule applies to all elements of the specified type. » id attribute: The rule applies to the specific element with the specified id value. » class attribute: The rule applies to all elements with the specified class value. » Pseudo-element: The rule applies to a specific part within an element. » Pseudo-class: The rule applies to elements in a specific state. Each declaration defines a CSS3 style property and its associated value. Each prop- erty sets a specific style (such as a color or a font) to the element the rule applies to. You must end each declaration with a semicolon, and you can list as many declarations as needed in the rule. Here’s the format of the property and its value as you list them in the declaration: property: value In the following sections, I explain in more detail the five ways to define a selector.

The Basics of CSS3 CHAPTER 2 The Basics of CSS3 105 Element type You can apply the same styling to all elements of a specific type in your web page by specifying the element name as the selector: h1 {color: red;} This rule ensures that the browser displays all h1 elements in the web page using a red font color. If you want to apply the same styles to multiple types of elements, you can either list them as separate rules or group the elements together in the selector by sepa- rating the element names with commas, like this: h1, p {color: red;} This rule instructs the browser to style all h1 and p elements using a red font color. id attribute If you need to define a rule that applies to just a single element in the web page, use the id attribute as the selector. To specify an id attribute as the selector, place a pound sign (#) in front of the id name: #warning {color: red;} To use the rule in your HTML5 code, just apply the id attribute value to the ele- ment you need to style: <h1 id="warning">This is a bad selection.</h1> The browser will apply that rule to the specific element that uses the id attribute value. class attribute If you need to define a rule that applies to multiple elements, but not necessarily all the elements of that type, use the class attribute as the selector. To specify a class attribute as the selector, place a period in front of the class name: .warning {color: red;}

106 BOOK 2 HTML5 and CSS3 Then just apply that class attribute to whichever elements you need to style using that rule: <h1 class="warning">This is a bad selection.</h1> <p class="warning">Please make another selection.</p> As you can see from this example, you can apply the same class attribute value to different element types, making this a very versatile way of styling sections of your web page! If you decide you only need to apply a rule to one particular element type of the class, you can specify the element type in the selector before the class value: p.warning {color: red;} This rule will apply only to p elements with the class attribute value of warning. Pseudo-element The CSS standard defines a handful of special cases where you can apply styles to a subsection of the element content, and not the entire content of an element. These rules are called pseudo-elements. To use a pseudo-element rule, separate the rule from the selector it applies to using a double colon (::): selector::pseudo-element CSS3 supports a set of keywords for the pseudo-element names. For example, if you want to get fancy and style the first letter of a paragraph of text differently from the rest of the text, you can use the first-letter pseudo-element keyword: p::first-letter {font-size: 20px} The first-letter pseudo-element matches with only the first letter of the p ele- ment, as shown in Figure 2-1. CSS3 defines only a handful of pseudo-elements. Table 2-1 lists them. There aren’t a lot of pseudo-elements available, but these few pseudo-elements can come in handy for trying special formatting of your web pages.

The Basics of CSS3 CHAPTER 2 The Basics of CSS3 107 The after and before pseudo-elements may sound a bit strange, because there’s no content to style before or after an element. They’re most commonly used for placing images after or before the content in the element. Pseudo-class A pseudo-class applies the defined styles to an element that is in a specific state on the web page. The state refers to how the element behaves, such as buttons that are disabled, check boxes that are checked, or input boxes that have the browser focus. FIGURE 2-1: Using the first-letter pseudo-element on text. TABLE 2-1 CSS3 Pseudo-Elements Pseudo-Element Description after Places an object before the selected element content before Places an object after the selected element content first-letter Applies the rule to the first letter of the selected element content first-line Applies the rule to the first line of the selected element content selection Applies the rule to the content area selected by the site visitor

108 BOOK 2 HTML5 and CSS3 These rules are commonly applied to hypertext links on the web page to help site visitors distinguish links they’ve already visited. You do that by using a series of four pseudo-class style rules: » link: Applies the rule to a normal, unvisited link » visited: Applies the rule to a link that the site visitor has already visited » hover: Applies the rule when the site visitor hovers the mouse pointer over the link » active: Applies the rule when the site visitor clicks the mouse on the link You specify pseudo-class rules using a single colon to separate it from the selector in the rule definition: a: link {color: orange;} a: visited {color: purple;} a: hover {color: green;} a: active {color: red;} All these pseudo-class rules apply to all the anchor elements in the web page and apply different colors to the hyperlink text depending on the hyperlink state. It’s extremely important to list the anchor element pseudo-class rules in the order shown here, or they won’t work! If you want to remove the underline that most browsers apply to hypertext links, add the following property to the pseudo-element style rule: text-decoration:none; There are lots of pseudo-classes that you can use to apply rules to specific ele- ments in the your web pages. Table 2-2 shows the list of available pseudo-classes in CSS3. Many of the pseudo-class style rules (such as first-child and last-child) work with the location of an element within the Document Object Model (DOM). Book 3, Chapter 2, discusses the DOM and how to use it to reference elements on the web page.

The Basics of CSS3 CHAPTER 2 The Basics of CSS3 109 TABLE 2-2 The CSS3 Pseudo-Classes Pseudo-Class Description active The rule applies to hypertext links while the site visitor clicks them. checked The rule applies to input check boxes and radio options that are selected (checked). disabled The rule applies to input elements that are disabled. empty The rule applies to elements that have no children. enabled The rule applies to input elements that are enabled. first-child The rule applies to the first child element of a parent element. first-of-type The rule applies to the first child element of the same type as the parent. focus The rule applies to elements that have the browser focus. hover The rule applies to elements that the mouse pointer is hovering over. in-range The rule applies to elements whose value is within the specified range. invalid The rule applies to elements whose value is invalid. lang(language) The rule applies to elements with the lang attribute specified. last-child The rule applies to the last child element of a parent element. last-of-type The rule applies to the last child element of the same type as the parent. link The rule applies to unvisited hypertext link elements. not(selector) The rule applies to all elements except the specified selector elements. nth-child(n) The rule applies to the nth child of the parent element. nth-last-child(n) The rule applies to the nth child of the parent element counting backward from the last element. nth-of-type(n) The rule applies to the nth child element with the same type as the parent. only-of-type The rule applies to every element that is the only element of the same type as the parent. only-child The rule applies to every element that is the same only child of a parent. optional The rule applies to input elements that do not have the required attribute. out-of-range The rule applies to elements with a value out of the specified range. read-only The rule applies to elements with a readonly attribute specified. (continued)

110 BOOK 2 HTML5 and CSS3 Applying style rules In Book 1, Chapter 1, I discuss the different ways to apply CSS3 styles to an HTML5 document. To refresh your memory, there are three ways to do that: » Inline styles: Place the style properties inside the HTML5 element opening tag, using the style attribute: <h1 style="color: red;">Warning</h1> » Internal styles: Use the <style> tag to define a set of styles that apply to the entire document: <style> h1 {color: red;} </style> » External styles: Use an external file to contain the style definitions, and then add the <link> tag in the HTML5 document to reference the external style sheet: <link rel="stylesheet" href="mystyles.css"> Note that with the inline style definitions, you leave off the selector part of the rule. Because the rule applies only to the element that declares it, there’s no need for the selector. With both the inline and external style sheet methods, you define the set of rules separately within the style sheet. The great benefit of using the external style sheet method is that you can then apply the same style sheet to all the pages of your website! TABLE 2-2 (continued) Pseudo-Class Description read-write The rule applies to elements without a readonly attribute specified. required The rule applies to elements with a required attribute specified. root The rule applies to the document’s root element. target The rule applies to the current active element specified. valid The rule applies to elements that have a valid value. visited The rule applies to hypertext links that the site visitor has already visited.

The Basics of CSS3 CHAPTER 2 The Basics of CSS3 111 You can use any of these locations to define your style rules, or you can use them all at the same time! If two or more style rules apply to the same element on the web page, the cascading feature of CSS3 kicks in. CSS3 defines a specific process on how the browser applies conflicting rules to an element to ensure everything happens in order. The next section explains how that works. Cascading style rules As the name suggests, if you define multiple style rules for a web page, the rules cascade down from the lower-priority rules, which are applied first, to the higher- priority rules, which are applied later. Saying “down” from a lower to a higher priority may seem counterintuitive, but it’s common jargon in CSS circles. Just remember that the higher-priority rules take precedence over the lower-priority rules. The CSS3 standard defines a strict process for how browsers should apply style rules to each element. In Book 1, Chapter 1, I outline an abbreviated version of the cascading rules. There are actually ten different rule levels that the CSS3 standard defines for applying rules! However, most web designers don’t use all ten levels to define rules, so things don’t usually get that complicated. Table 2-3 shows the official CSS3 cascading rules process. TABLE 2-3 The CSS3 Cascading Rules Process Rule Type Description Priority Level Importance Rules contain the !important property and override all other rules 1 Inline Rules defined using the style attribute in an element opening tag 2 Media Rules defined for a specific media type 3 User defined Accessibility features defined in the browser by the site visitor 4 Specific selector A selector referring to an id, class, pseudo-element, or pseudo-class 5 Rule order When multiple rules apply to an element, the last rule declared wins 6 Inheritance Rules inherited from parent elements in the web page 7 Internal Rules defined in internal style sheets 8 External Rules defined in external style sheets 9 Browser default The default styles built into the browser, the lowest priority 10

112 BOOK 2 HTML5 and CSS3 Notice that accessibility features have a special place in the cascading rule order. Many of your website visitors may have some type of viewing disability prevent- ing them from viewing your content as you style it. Most browsers allow users to define their own style features, such as specifying foreground and background contrasting colors or changing the font size to make text more readable. Now that you’ve seen how to define CSS3 rules and where to define them, the next step is to start learning some rules to apply to your web pages. The CSS3 standard defines a myriad of styles for you to use. Entire books have been written trying to cover all the different rules and features, such as CSS3 For Dummies by John Paul Mueller (Wiley). The remaining sections in this chapter walk you through some of the more commonly used rules that you’ll want to keep in mind as you design your dynamic web applications. Styling Text No place is styling more important than with the text that appears on your web page. You can transform a dull, boring website with just a few changes to the text styles. This section walks through the options you have available for styling text to help liven up your website. Setting the font A font defines how a medium displays the characters in the content. Whether it’s etching words into stone, setting text on paper using a printing press, or displaying pixels on a computer monitor, fonts help control how readers interpret the content. When you place text on your web page using HTML5, the browser selects a default font style, size, and format based on the element type, and it uses that same set- ting for all the text in those elements on your web page. That not only makes for a boring web page, but can also confuse your site visitors if all the content blends together. This section describes how you can change the font features the browser uses to display text in your web pages. Finding a family The CSS3 standard defines the font-family style property to allow you to change the style of font. Here’s the format for the font-family property: font-family: fontlist;

The Basics of CSS3 CHAPTER 2 The Basics of CSS3 113 The fontlist value is a comma-separated list of font names. There are two ways to specify a font in the list: » Using a specific font name: Specific font names require the browser to use that specific font to display the text, such as Times New Roman, Arial, or Helvetica. Browsers are limited to using only the fonts that are installed on the workstation, so specifying a specific font name can be a gamble. If that font isn’t available on the site visitor’s workstation, the browser will revert to the default font. It has become common practice to provide several options of font names in the font-family property. The browser will try to use the font presented first in the list, and if that’s not available, it’ll try the next font listed, and continue down the list. If no font is available, the browser reverts to the default font. » Using a generic font group: Generic font groups give the browser a little more leeway in selecting a font to use. Instead of looking for a specific font, the browser can use any font that’s included in the font group. CSS3 defines the following font groups: • cursive: A font that mimics handwritten text • fantasy: An ornamental font used for special text • monospace: A font that uses the same spacing for all characters • sans-serif: A font without any ornamentation added to characters • serif: A font that uses ornamentation at the tail of each character It’s common practice to list specific font names first in the font list and then, as a last resort, add a generic font group, like this: font-family: Arial, 'Times New Roman', sans-serif; With this rule, the browser will try to use the Arial font. If that’s not available on the visitor’s workstation, it will try to use the Times New Roman font. If Times New Roman is also not available, the browser will look for a font from the sans- serif font group. Note that for font names that contain spaces, you must enclose the name in single quotes. The CSS3 standard defines an exciting new feature called web fonts. Web fonts allow you to define your own font on a server so that browsers can download them along with the web page. I dive into using web fonts in more detail in Chapter 4 of this minibook.

114 BOOK 2 HTML5 and CSS3 Picking a size After selecting a font style to use, the next step is to decide what size the font should be. Browsers have built-in sizes for separating out the different header levels, as well as standard text. However, you can change that by using the font- size property: font-size: size; You’d think specifying a font size would be easy, but CSS3 actually allows you to specify the size in one of five different methods: » As an absolute unit of measurement » As a relative unit of measurement » As a percentage of the space assigned to the element » Using a size keyword » Using a size keyword relative to the space assigned to the element You specify absolute units using a specific size value of measurement. To compli- cate things even more, CSS allows you to use six different units of measurements, shown in Table 2-4. The first three units of measurement shown in Table 2-4 are easily recognizable, but the last three aren’t as common. There are 6 picas in an inch, and 72 points in an inch. The pixel unit originally matched up to pixels on a standard computer monitor, but with the advancement of monitor technology, that isn’t the case anymore. TABLE 2-4 CSS Font-Size Absolute Units of Measurement Unit Description cm Centimeters in Inches mm Millimeters pc Picas pt Points px Pixels

The Basics of CSS3 CHAPTER 2 The Basics of CSS3 115 You can specify the size using either a whole number or a decimal value: font-size: 0.25in; font-size: 48pt; The relative units of measurement set the size of the font relative to other elements on the web page. Table 2-5 shows the relative size units in CSS3. The em relative unit size is the most popular. It sizes the element relative to the text in the web page. For example, here’s a common rule that you’ll see: h1 {font-size: 2em;} This tells the browser to size the h1 element twice the size of the text in the web page. By using relative units, you can easily change the size of headings based on the size of the text in the content. If you decide to change the font size of the text in the web page, the headings will automatically change size to stay in the same proportion. To make things simpler, CSS also allows you to set the text size using a human- readable keyword. There are both absolute and relative keywords available: » Absolute: xx-small, x-small, small, medium, large, x-large, xx-large » Relative: smaller, larger TABLE 2-5 CSS Font-Size Relative Units of Measurement Unit Description ch Relative to the size of the zero character em Relative to the size of the normal font size of the elements ex Relative to the normal height of the font size currently used rem Relative to the height of the root element vh Relative to 1% of the browser window height vw Relative to 1% of the browser window width vmax Relative to 1% of the larger of the browser window width or height vmin Relative to 1% of the smaller of the browser window width or height % As a percentage of the normal element size

116 BOOK 2 HTML5 and CSS3 Using the keywords makes setting font sizes easier, but you’re still a little at the mercy of the browser. It’s up to the browser to determine just what is a small, medium, or large size font. Playing with color By default, browsers display all text in black on a white background. Things don’t get any more boring than that! One of the first steps in livening up your website is to change the text color scheme. There are two CSS3 properties that you need to do that: » color: Selects the color the browser uses for the text font » background-color: Selects the color the browser uses for the background You have a vast palette of colors to choose from for your color scheme. Usually, it’s a good idea to pick a color scheme for your website and try to stick with that for most of the web pages contained in the website. Often, a corporation will set the color scheme of its website based on the colors used in the company logo. Occasionally, you may need some content to pop out at visitors, so you’ll need to deviate some from the scheme. The original CSS standard provided three ways to define colors used in styles: » With color names: You can choose a text value from a standard list of color names. CSS3 defines many different colors by name. If you plan on using a standard color, most likely you can call it just by its name: p {color: red; background-color: white;} » With RGB hexadecimal values: If you want to fine-tune the colors your web page elements use, you can select the intensity of the red, green, and blue colors based on hexadecimal values from 00 to FF. If you’re into hexadecimal numbers, define the color as three hexadecimal values preceded by a pound sign: p {color: #ffa500;} The ffa500 value sets the red hue at full intensity, sets the green hue a little lower, and turns the blue hue off, producing the orange color.

The Basics of CSS3 CHAPTER 2 The Basics of CSS3 117 » With the rgb() function: You can select the color using decimal values from 0 to 255 for the red, green, and blue intensities. To specify the same color using the rgb() method, you’d use the following: p {color: rgb(255, 165, 0);} If you’re not picky about the shade of red you want, the first method will work just fine. But odds are, you’ll want to be more precise in your color selection (for example, matching the shade of red to the red in your company’s logo), so you’ll want to use one of the other two methods. Which of the other two methods you use is a matter of personal preference. The updated CSS3 standard provides four new ways of working with colors in your web pages: » RGBA: Adds an opacity value to the standard RGB settings » HSL: Defines the color as a hue, saturation, and lightness percentage » HSLA: Defines the color as an HSL value, plus adds an opacity value » Opacity: Defines a transparency value to make the element more opaque The main addition to the CSS3 color scheme is the opacity feature. The opacity fea- ture provides the ability to make elements transparent, or faded. The opacity value ranges from 0.0 (fully transparent) to 1.0 (no transparency, also called opaque). Here’s an example to demonstrate just how changing colors in elements works: 1. Open your favorite text editor, program editor, or integrated develop- ment environment (IDE) package. 2. Enter the following code into the editor window: <!DOCTYPE html> <html> <head> <title>Testing colors in CSS3</title> <style> p { font-family: Arial, Helvetica, sans-serif; color: #ff0000; background-color: cyan; }

118 BOOK 2 HTML5 and CSS3 h1 { color: rgb(255, 165, 0); background-color: green; } </style> </head> <body> <h1>Testing the color scheme</h1> <p> The quick brown fox jumps over the lazy dog. </p> <h1>This is the end of the color test</h1> </body> </html> 3. Save the program as colortest.html in the DocumentRoot folder of your web server. If you’re using XAMPP, it’s c:\xampp\htdocs for Windows or /Applications/ XAMPP/htdocs for macOS. 4. Start the web server. If you’re using XAMPP, launch the XAMPP Control Panel and then click the Start button for the Apache web server. 5. Open your browser and go to the URL for the new file: http://localhost:8080/colortest.html Note: You may need to change the port in the URL to what your web server uses. 6. Stop the web server and close the browser. You should see in the output from your web page that the browser uses different colors for the h1 elements and the p elements. However, notice that there’s some whitespace between the elements, as shown in Figure 2-2. You didn’t define any space between the p and h1 elements in the HTML5 code, so why is that there? You may be thinking that something has gone wrong with the browser, but actually, it’s a feature of CSS that I cover next.

The Basics of CSS3 CHAPTER 2 The Basics of CSS3 119 Working with the Box Model CSS3 handles all elements on the web page using the box model, which defines the area inside and around the element and provides a way for you to alter the style of those features. Figure 2-3 shows the box model defined in CSS3. The box model defines four different sections in the element. Working from the inside out, they are as follows: » Content: The text or image the element contains » Padding: The space around the content FIGURE 2-2: Displaying elements with different colors in CSS3 FIGURE 2-3: The CSS3 box model.

120 BOOK 2 HTML5 and CSS3 » Border: An area, usually visible, that goes around the content and padding » Margin: The space outside of the element border, between elements With CSS3, you can alter the padding, margin, and border around an element to help make it stand out in the web page. You do that using the padding, margin, and border style properties. Let’s correct the colortest.html code to remove the margin around the elements and add some extra padding to see how that changes things: 1. Open the colortest.html file you created in the “Playing with color” section in your favorite text editor, program editor, or IDE package. 2. Modify the p and h1 element styles to set the element margins to 0px and add 10px of padding. The styles should now look like this: <style> p { font-family: Arial, Helvetica, sans-serif; color: #ff0000; background-color: cyan; margin: 0px; padding: 10px; } h1 { color: rgb(255, 165, 0); background-color: green; margin: 0px; padding: 10px; } </style> 3. Save the updated colortest.html file. 4. Start the web server. If you’re using XAMPP, launch the XAMPP Control Panel and then click the Start button for the Apache web server. 5. Open your browser and go to the URL for the new file: http://localhost:8080/colortest.html

The Basics of CSS3 CHAPTER 2 The Basics of CSS3 121 Note: You may need to change the port in the URL to what your web server uses. 6. Stop the web server and close the browser. Figure 2-4 shows the web page this code produces. Notice that the white space is gone and the background space around the text in the headings and paragraph is larger. Feel free to play around with the margin and padding numbers in the HTML5 code and watch how it changes the display results. Styling Tables The previous chapter explains how to create tables using HTML5. Older versions of HTML defined attributes in the table element to help add some features, such as creating borders around the table cells and sizing the table cells. However, HTML5 removed all those attributes, so it’s up to CSS to provide those features. FIGURE 2-4: The updated colortest.html file output.

122 BOOK 2 HTML5 and CSS3 Table borders When you’re presenting data in tables, you may want to create borders around the table and around the individual cells in the table. You do that with the CSS border property: table {border: 1px solid black;} The first value in the border property (1px) is the width of the border. The second value (solid) is the type of border; you can specify dashed, dotted, double, or solid for the border type. The third value (black) specifies the color of the border. You can add borders around any of the table family of elements — table, th, tr, or td. However, if you specify the border property for all of them, you’ll see dou- ble borders around the individual cells. To prevent that from happening, add the border-collapse property to the rule, and set its value to collapse. If you only want to show horizontal lines between the table rows, you can use the border-bottom property for the tr element. This only creates borders at the bot- tom of each row. Follow these steps to add borders around a table: 1. Open the mytable.html file that you created in the preceding chapter in your favorite text editor, program editor, or IDE package. If you haven’t yet read Chapter 1 of this minibook, you’ll have to turn back and at least work through the section on tables before proceeding with these steps. I’ll wait for you! 2. Add a style element to the head section of the document to define the table styling rule: <style> table tr td { border: 1px solid black; border-collapse: collapse; } </style> I included the border-collapse property to prevent double borders from appearing. 3. Save the file.

The Basics of CSS3 CHAPTER 2 The Basics of CSS3 123 4. Start your web server software, open your browser, and go to the following URL: http://localhost:8080/mytable.html 5. Close the browser and stop your web server software. With the added stylings, you should see a single border line around each table cell and a single border line around the entire table, as shown in Figure 2-5. Now that you have borders around each cell, it may seem a bit more obvious how cramped the data inside the table looks. You can do some more playing around with sizing and positioning the text inside each cell. I cover that in the next section. Table data As you can see in Figure 2-5, by default, the browser creates the table cells just large enough to contain the largest data value in the cells. That can make for a somewhat cramped table. Fortunately, you can add a little more space around the data in the table cells using some additional CSS properties. FIGURE 2-5: Adding a border to the table.

124 BOOK 2 HTML5 and CSS3 Padding the cells A padded cell sounds somewhat ominous, but adding the padding property to your table cells can make a huge difference in the appearance of the table data: table tr td { border: 1px solid black; border-collapse: collapse; padding: 10px; } When you provide some additional space inside the table cells, you have some more options on where the data appears within the table. Aligning text in the cells You can align the data to the left side, center, or right side of the cell with the text-align property: table th { border: 1px solid black; border-collapse: collapse; padding: 10px; text-align: center; } This definition centers the text in the table header (th) elements. If you also want to move the text upward inside the cell, use the vertical-align property. Coloring tables Just using the default black-and-white tables can quickly put your site visitors to sleep! Add the color and background-color properties to your table to make it stand out. You can apply the colors to the entire table, individual rows, or even individual cells. To simulate the old mainframe printer report style using alternating row colors in the table, use the nth-child pseudo-class to style every other row in the table as a different color, like this: tr: nth-child(even) { background-color: lightgreen; } If you’re old enough to remember the mainframe computer report days, this should bring back memories!

The Basics of CSS3 CHAPTER 2 The Basics of CSS3 125 Another feature that comes in handy is to use the hover pseudo-class to change the background color of an individual cell as your site visitor hovers the mouse pointer over it: td: hover { background-color: yellow; } Now things are really starting to get fancy! Positioning Elements By default, browsers place elements in the window following a set order. As the web page defines each element, the browser places it in the window starting at the upper-left corner of the window, proceeding from left to right, and top to bottom. To demonstrate this, let’s run a quick test. You’ll create a web page that contains five sections: » A header to display at the top of the web page » A footer to display at the bottom of the web page » A navigation section to display on the left side of the middle section » An aside section to display on the right side of the middle section » A main content section to display in the middle of the middle section This is a pretty standard web page layout structure, which I’m sure you’ve seen lots of times as you’ve browsed the web. Follow these steps to run the test: 1. Open your favorite text editor, program editor, or IDE package, and enter the following code: <!DOCTYPE html> <html> <head> <title>Positioning Test</title> <style>

126 BOOK 2 HTML5 and CSS3 header { background-color: red; margin: 0px; padding: 10px; height: 25px; width: 600px; } nav { background-color: blue; margin: 0px; padding: 10px; height: 125px; width: 200px; } section { background-color: green; margin: 0px; padding: 10px; height: 125px; width: 200px; } aside { background-color: yellow; margin: 0px; padding: 10px; height: 125px; width: 200px; } footer { background-color: orange; margin: 0px; padding: 10px; height: 25px; width: 600px; } </style> </head> <body> <header><p>This is the header</p></header> <nav><p>Navigation</p></nav>

The Basics of CSS3 CHAPTER 2 The Basics of CSS3 127 <section><p>Section</p></section> <aside><p>Aside</p></aside> <footer><p>This is the footer</p></footer> </body> </html> 2. Save the file as positiontest.html in the DocumentRoot folder of your web server. 3. Start the web server, open your browser, and go to the following URL: http://localhost:8080/positiontest.html 4. Close the browser and stop the web server. This test creates a web page that contains a header section, a navigation section, a main content section, an aside section, and a footer section. It uses the height and width style properties to define how large each section should be and sets a different background color for each section so you can tell them apart on the web page. However, when you display the web page, you’ll probably be a bit disap- pointed with the results, which are shown in Figure 2-6. The browser positioned each of the different sections in the order you defined them, each on top of the other. Ouch! That’s not what we wanted at all! FIGURE 2-6: Displaying the web page with no positioning.

128 BOOK 2 HTML5 and CSS3 To get the browser to place the different web page sections the way we want, we’ll need to use some of the positioning properties available in CSS. The next sections walk you through how to do that. Putting elements in a specific place Placing elements in specific locations on the web page requires using the position- ing properties available in CSS. There are three main positioning properties that are normally used: » position: Sets the position method the browser should use to place the element » top: Defines the location for the top of the element » left: Defines the location for the left side of the element The position property defines what method the browser uses to place the ele- ment in the web page. There are four different positioning methods: » absolute: Changes the element’s position relative to the nearest positioned element that precedes it. » fixed: Places the element in a fixed location in the browser window. If the site visitor scrolls the window, the element stays in the same spot. » relative: Changes the element’s position relative to the default position. » static: Places the element in its normal location in the web page following the default placement rules. To use the absolute, fixed, and relative positioning methods, you need to define the location in the browser window where the element will be placed. You do that using the top and left properties. Let’s change the positiontest.html test file to use absolute positioning to place the sections. Just follow these steps: 1. Open the positiontest.html file in your favorite text editor, program editor, or IDE package.

The Basics of CSS3 CHAPTER 2 The Basics of CSS3 129 2. Modify the styles defined so they look like this: <style> header { background-color: red; margin: 0px; padding: 10px; height: 25px; width: 600px; position: absolute; top: 0px; left: 0px; } nav { background-color: blue; margin: 0px; padding: 10px; height: 125px; width: 200px; position: absolute; top: 46px; left: 0px; } section { background-color: green; margin: 0px; padding: 10px; height: 125px; width: 200px; position: absolute; top: 46px; left: 201px; } aside { background-color: yellow; margin: 0px; padding: 10px; height: 125px; width: 200px;

130 BOOK 2 HTML5 and CSS3 position: absolute; top: 46px; left: 402px; } footer { background-color: orange; margin: 0px; padding: 10px; height: 25px; width: 600px; position: absolute; top: 192px; left: 0px; } </style> 3. Save the updated positiontest.html file as positiontest2.html. 4. Start your web server, open a browser, and go to the following URL: http://localhost:8080/positiontest2.html 5. Close the browser and stop the web server. The additional code sets the positioning method for the browser to use for each section to absolute, which means it will place the sections at exactly the place in the browser window you define using the top and left properties. When you display the web page, you should see the result as shown in Figure 2-7. Now things are starting to look like a real web page! Floating elements Absolute positioning has made a huge difference in how we can lay out elements in our web pages, but it doesn’t solve all problems. You’ve probably already real- ized that trying to figure out the exact location for each element in a compli- cated web page would be somewhat difficult. Also, you’ll notice as you resize the browser window that the sections stay in a fixed location and size — they don’t expand or shrink with the browser window. Fortunately, there’s a way you can avoid these problems.

The Basics of CSS3 CHAPTER 2 The Basics of CSS3 131 CSS uses a feature called the float property to aid in positioning elements in the web page using a more dynamic method. The float property allows you to take an element out of the normal positioning flow in the web page and position it within the right or left edge of its parent container element. You don’t need to calculate the exact position for the elements within the parent. The format of the float property is pretty simple: float: position The position value can be none, left, or right. The float property is most often used to create columns in a web page layout. Instead of using absolute positioning for the columns, you define a parent con- tainer element, and then just float the column elements inside the parent. Let’s give that a try with our positiontest.html example. You’ll add a div element to use as the container for the middle three sections (nav, section, and aside) in the web page document. Follow these steps: 1. Open the original positiontest.html file in your favorite text editor, program editor, or IDE package. FIGURE 2-7: Using absolute positioning to place sections in the web page.